vue指令v-model示例解析

限制

• <input>
• <select>
• <textarea>
• components

修饰符

• .lazy - 取代 input 监听 change 事件
• .number - 输入字符串转为数字
• .trim - 输入首尾空格过滤

用法示例

1、input文本

 <div id="app">
   <input v-model="message" placeholder="edit me">
   <p>Message is: {{ message }}</p>
 </div>
 <script>
   var app =new Vue({
     el:'#app',
     data:{
       message:'this is a message!'
     }
   })
 </script>

2、textarea多行文本

 <div id="app">
   <span>Multiline message is:</span>
   <p style="white-space: pre-wrap">{{ message }}</p>
   <br>
   <textarea v-model="message" placeholder="add multiple lines"></textarea>
 </div>
 <script>
   var app =new Vue({
     el:'#app',
     data:{
       message:'this is a message!'
     }
   })
 </script>

3、单个复选框

 <div id="app">
   <input type="checkbox" id="checkbox" v-model="isChecked">
   <label for="checkbox">{{isChecked?'已勾选':'未勾选' }}</label>
 </div>
 <script>
   var app =new Vue({
     el:'#app',
     data:{
       isChecked:true
     }
   })
 </script>

4、多个复选框

 <div id="app">
   <input type="checkbox" id="Tom" value="Tom" v-model="boys">
   <label for="Tom">Tom</label>
   <input type="checkbox" id="Jack" value="Jack" v-model="boys">
   <label for="Jack">Jack</label>
   <input type="checkbox" id="Mickey" value="Mickey" v-model="boys">
   <label for="Mickey">Mickey</label>
   <br>
   <span>Checked boys: {{ boys }}</span>
 </div>
 <script>
   var app =new Vue({
     el:'#app',
     data:{
       boys:[]
     }
   })
 </script>

5、单选框

 <div id="app">
   <input type="radio" id="One" value="One" v-model="chooses">
   <label for="One">One</label>
   <input type="radio" id="Two" value="Two" v-model="chooses">
   <label for="Two">Two</label>
   <input type="radio" id="Three" value="Three" v-model="chooses">
   <label for="Three">Three</label>
   <br>
   <span>The choose is: {{chooses}}</span>
 </div>
 <script>
   var app =new Vue({
     el:'#app',
     data:{
       chooses:''
     }
   })
 </script>

6、单选下拉框列表

 <div id="app">
   <select v-model="selected">
     <option disabled value="">请选择</option>
     <option>Tom</option>
     <option>Jack</option>
     <option>Mickey</option>
   </select>
   <span>Your selected is: {{ selected }}</span>
 </div>
 <script>
   var app =new Vue({
     el:'#app',
     data:{
       selected:''
     }
   })
17 </script>

如果 v-model 表达初始的值不匹配任何的选项，<select> 元素就会以”未选中”的状态渲染。在 iOS 中，这会使用户无法选择第一个选项，因为这样的情况下，iOS 不会引发 change 事件。因此，像以上提供 disabled 选项是建议的做法。

7、多选下拉框列表

 <div id="app">
   <select v-model="selected" multiple>
     <option disabled value="">请选择</option>
     <option>Tom</option>
     <option>Jack</option>
     <option>Mickey</option>
   </select>
   <span>Your selected is: {{ selected }}</span>
 </div>
 <script>
   var app =new Vue({
     el:'#app',
     data:{
       selected:[]
     }
   })
 </script>

8、动态生成的单选下拉框列表

 <div id="app">
   <select v-model="selected">
     <option disabled value="">请选择</option>
     <option v-for="option in options" :value="option">{{option}}</option>
   </select>
   <span>Your selected is: {{selected}}</span>
 </div>
 <script>
   var app =new Vue({
     el:'#app',
     data:{
       selected:'',
       options: [
         'Tom',
         'Jack',
         'Mickey'
       ]
     }
   })
 </script>

9、绑定value

对于单选按钮，勾选框及选择列表选项， v-model 绑定的 value 通常是静态字符串（对于勾选框是逻辑值）：

 <!-- 当选中时，`picked` 为字符串 "a" -->
 <input type="radio" v-model="picked" value="a">
 <!-- `toggle` 为 true 或 false -->
 <input type="checkbox" v-model="toggle">
 <!-- 当选中时，`selected` 为字符串 "abc" -->
 <select v-model="selected">
   <option value="abc">ABC</option>
 </select>

• 复选框

 <input
   type="checkbox"
   v-model="toggle"
   v-bind:true-value="a"
   v-bind:false-value="b"
 >
 // 当选中时
 vm.toggle === vm.a
 // 当没有选中时
 vm.toggle === vm.b

• 单选按钮

 <input type="radio" v-model="pick" v-bind:value="a">
 // 当选中时
 vm.pick === vm.a

• 选择列表设置

 <select v-model="selected">
     <!-- 内联对象字面量 -->
   <option v-bind:value="{ number: 123 }">123</option>
 </select>
 // 当选中时
 typeof vm.selected // -> 'object'
 vm.selected.number // -> 123

• .lazy:在默认情况下， v-model 在 input 事件中同步输入框的值与数据 (除了 上述 IME 部分)，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

 <!-- 在 "change" 而不是 "input" 事件中更新 -->
 <input v-model.lazy="msg" >

• .number：如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：

<input v-model.number="age" type="number">

　　这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。

• 如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：

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