vue 学习三 v-model 表单绑定输入 以及修饰符的用处

v-model 指定使用过vue的同学都应该是很熟悉的了，这里就不多介绍，本章主要就是记录一些v-model非常实用的修饰符和对于v-model在html文本框，多行文本框，选择框，单选框，复选框上对于value的绑定方式

各种框上的value绑定方式

<input type="text"/>

<input v-model="message" placeholder="edit me"> //这里是与input的vaule进行绑定

<textarea>

<textarea v-model="message" placeholder="add multiple lines"></textarea> //这里是与textarea 的vaule进行绑定

<input type="checkbox"/>

<input type="checkbox" id="checkbox" v-model="checked">//复选框选中时checked 为true 未选择为false

  多个复选框同时v-model一个变量

<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">

  <input type="checkbox" id="john" value="John" v-model="checkedNames">

  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">

  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>
//javascript
new Vue({
  el: '#example-3',
  data: {
    checkedNames: [] //当checkNames 不是一个[]时所有的复选款共用一个状态 当一个复选款被选中时，所有的都选中，但一个处于非选中时，所有的复选框变成非选中。当它是[]，选中一个复选框，则checkNames数组中push一个元素，元素的值为复选框上的value。

                       当取消掉一个复选框时，复选框对应的value便会在chacheNames数组中删除

} })

<input type="radio">

<div id="example-4">
  <input type="radio" id="one" value="One" v-model="picked">

  <input type="radio" id="two" value="Two" v-model="picked">

</div>
new Vue({
  el: '#example-4',
  data: {
    picked: '' //哪个单选框被选中 picked就绑定框上的 value属性值
  }
})

<select>

<select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>

new Vue({
  el: '...',
  data: {
    selected: '' //选中第一个选项 则值为A 选中第二个则值为B selected与option文本值绑定
  }
})

修饰符

.lazy 非实时更新

<input v-model.lazy="msg" > 

不使用lazy修饰符时，当input的vaule改变msg就会改变 当使用lazy修饰符后 会变为使用change 事件

.number 自动将用户的输入值转化为number类型

<input v-model.number="age"/> //使用number修饰符后 如果你输入的值不能转化成number类型 那么它会自动把输入的值变成最后一次符合要求时的值 比如输入123 然后把输入值输入成123ssa 这时候输入的值不能转化成number 那么当input
                                 //失去焦点的时候age的值会变成最后一次能够转化成number时的值123

.trim 去除输入值首位的空格符，这个是很非常实用的修饰符

<input v-model.trim="trim"/>//