码迷,mamicode.com
首页 > 其他好文 > 详细

Vue#表单控件绑定

时间:2016-05-11 09:35:01      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:

单选:https://jsfiddle.net/miloer/bs49p0fx/

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

  

多个勾选:https://jsfiddle.net/miloer/bs49p0fx/1/

绑定多个元素,最后通过Vue过滤,用Json的格式,输出出来。我觉得挺优雅的。

#radio

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>

#select
<select v-model="selected">
  <option selected>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>Selected: {{ selected }}</span>

  

https://jsfiddle.net/miloer/bs49p0fx/2/结合以上,用V-for渲染,动态去绑定的一个小例子,我觉得这个,还是挺有用的,记得刚上大学那会,学的.NET,老师有一次作业就让大家完成类似的功能。

值绑定:

有时我们想绑定值到 Vue 实例一个动态属性上。可以用 v-bind 做到。 而且 v-bind允许绑定输入框的值到非字符串值。


<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b">

  

参数特性:
// 选中
vm.toggle === vm.a
// 取消选中
vm.toggle === vm.b

  

lazy:在默认情况下,v-modelinput 事件中同步输入框值与数据,可以添加一个特性lazy,从而改到在 change 事件中同步

number:将用户的输入保持为数字

debounce: 设置一个最小延迟,官方提到如果每次更新都要进行高耗操作(例如在输入提示中 Ajax 请求),它较为有用。

<input v-model="msg" debounce="500">


Vue#表单控件绑定

标签:

原文地址:http://www.cnblogs.com/moustache/p/5480638.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!