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

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

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

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

<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数组中删除

} })

<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 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文本值绑定
  }
})

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

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

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