vue_表单控件
Vue.js中提供 v-model 的指令对表单元素进行双向数据绑定，在修改表单元素值的同时，实例 vm 中对应的属性值也同时更新，反之亦然。本小节介绍主要input元素绑定v-model 后的具体用法和处理方式，实例所依赖的js代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="lib/bootstrap.min.css">
<script src="lib/jquery-1.7.2.js"></script>
<script src="lib/bootstrap.js"></script> <script src="vue2.0.js"></script>
<script src="vue-resource.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el : '.container',
data : {
message:'',
picked:'Runoob',//radio 默认选择男
checked:'',
multiChecked:[],
selected:'A', //option 默认选择A
multiSelected:[]
},
methods:{
add:function(){
// alert(this);
//添加数据到数组里面 this.myData.push({
name : this.username,
age : this.age,
});
//添加完后清空input
this.username = '';
this.age = '';
},
deletMsg : function(n){
if(n == -2){
this.myData = [];
}else{
this.myData.splice(n,1);//删除某一条数据
}
}
}
});
} </script>
</head>
<body>
<div class="container">
<form role="form">
<div class="form-group">
<h2>1. Text 输入框示例</h2>
<input type="text" class="form-control" v-model="message">
<span>Your input is : {{ message }}</span>
</div>
<div class="form-group">
<h2>2. Radio 单选框示例</h2>
<input type="radio" id="runoob" value="Runoob" v-model="picked">
<label for="runoob">Runoob</label>
<br>
<input type="radio" id="google" value="Google" v-model="picked">
<label for="google">Google</label>
<br>
<span>选中值为: {{ picked }}</span>
<!-- picked值为选中的radio元素的value值 -->
</div>
<div class="form-group">
<h2>3.Checkbox </h2>
<h4>Checkbox 分两种情况：单个勾选和多个勾选框</h4>
<h5>单个勾选框：v-model即为布尔值，此时input的value并不影响v-model的值</h5>
<input type="checkbox" v-model="checked">
<span>checked:{{ checked }}</span>
<h5>多个勾选框：v-model使用相同的属性名称，此属性为数组</h5>
<label for=""><input type="checkbox" value="1" v-model="multiChecked">1</label>
<label for=""><input type="checkbox" value="2" v-model="multiChecked">2</label>
<label for=""><input type="checkbox" value="3" v-model="multiChecked">3</label>
<label for=""><input type="checkbox" value="4" v-model="multiChecked">4</label>
<label for=""><input type="checkbox" value="5" v-model="multiChecked">5</label>
<label for=""><input type="checkbox" value="6" v-model="multiChecked">6</label>
<p>MultiChecked : {{ multiChecked.join(',') }}</p>
</div>
<div class="form-group">
<h2>4. Select</h2>
<h4>Select 分两种情况：单选和多选，多选的时候需要绑定到一个数组</h4>
<h5>单选：</h5>
<select name="" id="" v-model="selected">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<span>Selected: {{ selected }}</span>
<h5>多选：</h5>
<select name="" id="" v-model="multiSelected" multiple>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
</select>
<span>Selected: {{ multiSelected }}</span>
</div>
</form>
</div>
</body>
</html>
vue_表单控件的更多相关文章
- “此网页上的某个 Web 部件或 Web 表单控件无法显示或导入。找不到该类型，或该类型未注册为安全类型。”
自从vs装了Resharper,看见提示总是手贱的想去改掉它.于是乎手一抖,把一个 可视web部件的命名空间给改了. 喏,从LibrarySharePoint.WebPart.LibraryAddEd ...
- MVC树控件,mvc中应用treeview，实现复选框树的多层级表单控件
类似于多层级的角色与权限控制功能,用MVC实现MVC树控件,mvc中应用treeview,实现复选框树的多层级表单控件.最近我们的项目中需要用到树型菜单,以前使用WebForm时,树型菜单有微软提供的 ...
- AnjularJS系列2 —— 表单控件功能相关指令
第二篇,表单控件功能相关指令. ng-checked控制radio和checkbox的选中状态 ng-selected控制下拉框的选中状态 ng-disabled控制失效状态 ng-multiple控 ...
- 基于CkEditor实现.net在线开发之路（3）常用From表单控件介绍与说明
上一章已经简单介绍了CKEditor控件可以编写C#代码,然后可以通过ajax去调用,但是要在网页上面编写所有C#后台逻辑,肯定痛苦死了,不说实现复杂的逻辑,就算实现一个简单增删改查,都会让人头痛欲裂 ...
- Vue#表单控件绑定
使用v-model 在表单控件上实现数据双向绑定. 单选:https://jsfiddle.net/miloer/bs49p0fx/ <input type="checkbox&quo ...
- 了解HTML表单之13个表单控件
目录 传统控件 button select option optgroup textarea fieldset legend label 新增控件 datalist keygen output pro ...
- HTML5(常用的表单控件)
常用的HTML5的表单控件: Input 类型: color color 类型用在input字段主要用于选取颜色,如下所示: 从拾色器中选择一个颜色: 选择你喜欢的颜色: <input type ...
- wicket基础应用(2)--wicket表单控件的使用
该文可以转载,但转载必须注明作者,出处: 作者:lhx1026 出处:http://lhx1026.iteye.com/ 这一章介绍wicket表单控件的简单应用 1.Label控件 这个应该说是最常 ...
- Bootstrap系列 -- 18. 表单控件大小
前面看到的表单控件都正常的大小.可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置.不过Bootstrap框架还提供了两个不同的类名, ...
随机推荐
- mysql格式化时间戳为日期
MySQL中有一个像PHP的date函数一样的日期格式化函数DATE_FORMAT,使用这个函数时,需要像下面例子这样传递一个格式字符串和时间戳 SELECT DATE_FORMAT(NOW(),&q ...
- git第八节---git 撤销和回滚
# git 撤销 1. 未添加进暂存区的撤销 --未git add 2.添加进暂存区的撤销-- 已git add 未git commit 未添加进暂存区的撤销命令:git checkout -- ...
- Configure Many-to-Many relationship:
Configure Many-to-Many relationship: Here, we will learn how to configure Many-to-Many relationship ...
- 详细的最新版fastdfs单机版搭建
前言 目前项目是tomcat单机部署的,图片.视频也是上传到tomcat目录下,关键是此项目的主要内容还就是针对图片.视频的,这让我非常担忧:文件服务器的应用是必然的,而且时间还不会太久.之前一直有听 ...
- C# 匿名类型序列化、反序列化
前言 现在提倡前后端分离,分离后服务全部采用接口的方式给前端提供服务,当我们处理自定义查询时必定会多表查询,而处理多表查询时我们又懒的去建view model,建的过多项目也凌乱的很,所以在dao层处 ...
- 【Ueditor】富文本编辑使用
前提准备: 在http://ueditor.baidu.com/website/官网下载需要使用的版本.(我选用的1.4.3.1最新版本)因为这是以前做过的一个记录,现在移动到博客园保存记录.所有现在 ...
- 【Dubbo&&Zookeeper】3、Failed to read schema document 'http://code.alibabatech.com/schema/dubbo/dubbo.xsd'问题解决方法
转自:http://blog.csdn.net/gaoshanliushui2009/article/details/50469595 我们公司使了阿里的dubbo,但是阿里的开源网站http://c ...
- SpringCloud初体验之Eureka
Eureka简介 SpringBoot简化了Spring工程的复杂度,之前复杂的Spring工程被拆分成了一个个小的SpringBoot工程.那么SpringBoot之间如何通讯,相互获取信息呢?这就 ...
- 10折交叉验证（10-fold Cross Validation）与留一法（Leave-One-Out）、分层采样（Stratification）
10折交叉验证 我们构建一个分类器,输入为运动员的身高.体重,输出为其从事的体育项目-体操.田径或篮球. 一旦构建了分类器,我们就可能有兴趣回答类似下述的问题: . 该分类器的精确率怎么样? . 该分 ...
- Python 简单分页思路
一: li = [] for i in range(1000): li.append(i) while True: p = input('input page: ') p = int(p) start ...