标签：注意 下拉菜单 心得 选中 nbsp 回顾 font selected type
我们还是先回顾一下上一次的重点：
1.事件绑定，我们可以对分别用方法和js表达式对事件进行处理
2.当方法名带括号的时候，在方法中一定要传参；而不带括号的时候，vm会自动配置默认event
3.各类事件修饰器
之前我们提到过表单绑定，那么现在我们来深入了解一下，Vue这一令人惊奇的双向表单绑定功能：
直接进入正题：
<input v-model=" message ">
<p>{{ message }}</p>
这是最简单的表单双向绑定，标签P中的值将随着vm中值的变化而变化
值得注意的是，就算我们这样写：
<input v-model=" message " value=" ye ">
也不会读取value，message的值只会随着vm中的数据而变化，也就应证了vue数据驱动视图的原理
我们再延展一下：
<span> 文本框中输入的值为： </span>
<p> {{ message }} </p>
<textarea v-model=" message " ></textarea>
同理：
我们这样写也是没有作用的：
<textarea>{{ message }}</textarea>
继续深入：
当我们在使用多选框的时候：
单个checkbox：
<input v-model="checked" type="checkbox" id=" lla ">
<lable for=" lla ">{{ checked }}</lable>
这个时候checked的值将会在true和false之间切换。
多个checkbox的时候：
<input type=" checkbox " id="a" value="f" v-model="checked">
<lable for="a">a</lable>
<input type=" checkbox " id="b" value="m" v-model="checked">
<lable for="b">b</lable>
<input type=" checkbox " id="c" value="c" v-model="checked">
<lable for="c">c</lable>
<span>选中的为：{{ checked }}</span>
当我们对input设置了value的时候，那么checked的值就不再是true or false了，而是相应的value值
new Vue:({
el:‘‘,
data:{
checked:[]
}
})
如上面的代码，这个时候，返回在span中的值，是以数组的形式渲染的
单个radio:
<input type="radio" id="a" value="f" v-model="picked">
<lable for=" a ">a</lable>
<input type="radio" id="b" value="m" v-model="picked">
<lable for=" b ">b</lable>
<span>{{ picked }}</span>
其实和多选框的原理是一样的,
区别仅仅在于这里span中的值不是一个数组而是一个单一的值
下拉菜单 select：：：
单选：
<select v-mode="selected">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
<span>{{ selected }}</span>
当option标签没有指定value属性时，那么返回的值就是标签中的内容
多选：
<select v-mode="selected" multiple>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
<span>{{ selected }}</span>
这和多选框checked一样，返回的值依然为一个数组
渲染option列表：
我们可以发现option总是为多个，那么我们为何不能用列表来渲染呢：
<select v-model="selected">
<option v-for=" item in items " v-bind:value=" option.value ">{{ option.text }}</option>
</select>
<span>{{ selected }}</span>
new Vue({
el:‘‘,
data:{
selected:‘a‘,
option:
[
{ text: ‘One‘, value: ‘A‘ },
{ text: ‘Two‘, value: ‘B‘ },
{ text: ‘Three‘, value: ‘C‘ }
]
}
})
这里需要注意的是：
我们在这里绑定了option的value属性，如果不对它进行绑定，那么最后选出来的值就是
value而不是text
下面我们来总结一下数据绑定及了解一下相关修饰器：
<input type="radio" v-model="picked" value="a">
//选中picked时是字符串 ”a“
<input type="radio" v-model="toggle">
//选中时，将会是true和false间切换
<select v-model="selected">
<option value="aaa">aaa</option>
</select>
//selected时会输入字符串aaa
<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b">
// vm.toggle === vm.a (checked)
// vm.toggle === vm.b( unchecked )
这里其实没有多大变化，我们仅仅是对true和false分别绑定了一个值而已，很好理解
<select v-model="selected">
<option v-bind:value=" { number : aaa } ">aaa</option>
</select>
vm.selected.number === aaa
这里我们绑定了一个对象,相应的我们也读取了对象的值
接下来进入今天最后的环节，讲一讲数据绑定中相应的修饰器：
Lazy：
<input v-model.lazy="message">
// 这样的话，视图将会在输入完成之后变化，而不会即时变化
number：
<input v-model.number="message">
//这个可以强制将输入的数据转换成数字
trim
<input v-model.trim="message">
//自动去除字符串收尾的空格。
今天以此收尾，昨天晚上因为其他事耽搁了，后面尽量补上一篇，同时明天晚上也许也会交白卷，希望大家谅解，这两天学习状态不是很好，会及时调整，感谢各位的支持，晚安。
Vue学习之路---No.6（分享心得，欢迎批评指正）
标签：注意 下拉菜单 心得 选中 nbsp 回顾 font selected type
原文地址：http://www.cnblogs.com/fangmc/p/6562167.html
