1.简单使用:
当input里面的值发生变化的时候,就会自动把变化后的值,绑定到Vue对象上去了
<body> <div id="app"> <input v-model="name" />{{name}}<br /> <textarea v-model="t"></textarea>{{t}}<br/> <input type="checkbox" v-model="c"/>{{c}}<br/> <input type="radio" id="one" value="One" v-model="r"> <input type="radio" id="one" value="Two" v-model="r"> {{r}} </div> <script> new Vue({ el:'#app', data:{ name:'1', t:'', c:'', r:'' } }) </script> </body>
2.修饰符:.lazy .number .trim
.lazy
对于输入元素,默认的行为方式是一旦有数据变化,马上进行绑定。但是加上.lazy之后,相当于监听change操作,只有在失去焦点的时候,才会进行数据绑定了
<input v-model.lazy="name" />{{name}}<br />
.number
有时候,拿到了数据需要进行数学运算, 为了保证运算结果,必须先把类型转换为number类型,而v-model默认是string类型,所以就可以通过.number方式确保获取到的是数字类型了。
<input type="number" v-model.number="name" />{{name}}<br />
.trim
trim 去掉前后的空白
<input v-model.trim="name" />{{name}}<br />