vue指令之v-model：表单输入双向数据绑定

1.基础用法：可以使用v-model指令在表单中、、以及等表单元素上创建双向数据绑定。
2.v-model会忽略掉所有表单元素的value.checked,selected特性的初始值，将vue市里的数据作为数据来源。

文本框

<!-- 实现一个双向绑定 -->
    <input v-model="message" placeholder='edit me'>
       <p>{{message}}</p>
    <textarea v-model="message2" placeholder="add multiple lines"></textarea>
       <p>{{message2}}</p>

多行文本复选框

//checkedNames是vue中的一个数组元素
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
   	<label for="jack">Jack</label>
 <input type="checkbox" id="john" value="John" v-model="checkedNames">
   	<label for="john">John</label>
 <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
   	<label for="mike">Mike</label>
    <br>
  <p>checked names:{{checkedNames}}</p>

多行文本单选框

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

select下拉表的双向数据绑定

<select name="fruit" v-model='selected'>
      <option value="">选择一个网站</option>
       <option value="www.runoob.com">runoob</option>
       <option value="www.google.com">google</option>
 </select>
 <p>选择的网站是：{{selected}}</p>

v-model修饰符

 //.lazy :在默认情况下在input事件中同步输入框的值与数据，但可以添加一个修饰符lazy,转变为在change事件中同步。
<input v-model.lazy='msg'>
        <p>msg:{{msg}}</p>
//.number:  如果想自动将用户输入值转为Number类型可以添加一个修饰符number给v-model来处理输入值。
<input v-model.number='age' type='number'>
    <p>age:{{age}}</p>
//.trim 自动过滤用户输入的首位空格，可以添加trim修饰符到v-model上过滤输入
<input v-model.trim='msg1'>
    <p>msg1:{{msg1}}</p>