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优化的21条经验(转)
1. 为查询缓存优化你的查询大多数的MySQL服务器都开启了查询缓存.这是提高性最有效的方法之一,而且这是被MySQL的数据库引擎处理的.当有很多相同的查询被执行了多次的时候,这些查询结果会被放到一个 ...
- JavaWeb学习（二十二）———EL表达式
一.EL表达式简介 EL 全名为Expression Language.EL主要作用: 1.获取数据 EL表达式主要用于替换JSP页面中的脚本表达式,以从各种类型的web域 中检索java对象.获取数 ...
- Python和Java编程题(三)
1.题目:判断101到200之间有多少个素数,并输出所有素数 题目分析:判断一个数是否为素数,只需要判断这个数有没有除1和它自身外的其他因数.因此,判断这个数能否被2-它的平方根中的任意一个数整除即可 ...
- Spark ML机器学习
Spark提供了常用机器学习算法的实现, 封装于spark.ml和spark.mllib中. spark.mllib是基于RDD的机器学习库, spark.ml是基于DataFrame的机器学习库. ...
- SpringMVC4+MyBatis+SQL Server2014实现读写分离
前言 基于mybatis的AbstractRoutingDataSource和Interceptor用拦截器的方式实现读写分离,根据MappedStatement的boundsql,查询sql的sel ...
- 数据库MongoDB
一.MongoDB简介 MongoDB是由c++语言编写的,是一个基于分布式文件存储的开源数据库系统,在高负载的情况下,添加更多的节点,可以保证服务器性能.MongoDB旨在为web应用提供扩展的高性 ...
- 如何将自定义的搜索参数便捷的添加到js方式的bootstrap table的参数中
页面: <div> <form id="exp_form"> 查询参数... <button type="button" oncl ...
- [转]Angular4 自制分页控件
本文转自:https://blog.csdn.net/Junyuan_123/article/details/79486276 过年后第一波,自制的分页控件,可能功能没有 PrimeNG 那么好,但是 ...
- EXISTS 执行顺序
select * from a where a.s_status=1 and exists (select orderid from b where a.orderid=b.orderid) exis ...
- Morley's Therorem（UVA11178+几何）
题意:Morley定理,求D.E.F的坐标 思路:没什么算法,就是几何的应用.注意旋转角就好了. 转载请注明出处:寻找&星空の孩子 题目链接:UVA11178 #include<cstd ...