Vue之v-model

6.1 基本用法

表单控件在实际业务较为常见，比如单选、多选、下拉选择、输入框等，用它们可以完成数据的录入、校验、提交等。Vue扣提供了v-mo del 指令，用于在表单类元素上双向绑定数据，例如在输入框上使用时，输入的内容会实时映射到绑定的数据上。

<div id="app">
         <input type="text" v-model="message" placeholder="输入...">
         <p>输入的内容：{{message}}</p>
</div>
<script>
         var app = new Vue({
                 el:'#app',
                 data:{
                       message:""
                   }
         })
</script>

使用v-model 后，表羊控件显示的值只依赖所绑定的数据，不再关心初始化时的value属性，对于在＜textarea></textarea> 之间插入的值，也不会生效．使用v-model 时，如果是用中文输入法输入中文，一般在没有选定饲组前，也就是在拼音阶段， Vue 是不会更新数据的，当敲下汉字时才会触发史新。如果希望总是实时更新，可以用＠ input 来替代v-model . 事实上， v-model 也是一个特殊的语法糖，只不过它会在不同的表单上智能处理。

单选按钮：

单选按钮在单独使用时，不需要v-model ，直接使用v-bind 绑定一个布尔类型的值， 为真时选中， 为否时不选，例如：

<div id="app">
         <input type="radio" :checked="picked">
         <label>单选按钮</label>
</div>
<script>
         var app = new Vue({
                   el:'#app',
                   data:{
                           picked:true
                   },
         })
</script>

如果是组合使用来实现互斥选择的效果，就需要v-model 配合value 来使用：

<div id="app">
         <input type="radio" v-model="picked" value="html" id="html">
         <label for="html">HTML</label>
         <br>
         <input type="radio" v-model="picked" value="js" id="js">
         <label for="js">JavaScript</label>
         <br>
         <input type="radio" v-model="picked" value="css" id="css">
         <label for="css">CSS</label>
         <br>
         <p>选择的项是：{{picked}}</p>
</div>
<script>
         var app = new Vue({
                   el:'#app',
                   data:{
                            picked:'js'
                   },
         })
</script>

复选按钮：

复选框分为单独使用和组合使用，复选框单独使用时，也是用v-model来绑定一个布尔值。组合使用时需要v-model和value一起使用，多个数值绑定到同一种类型的数组数据中，value值在数组中，选择过程是双向的，选中时，数值也会push到数组中。

<div id="app">
         <input type="checkbox" v-model="checked" value="html" id="html">
         <label for="html">HTML</label>
         <br>
         <input type="checkbox" v-model="checked" value="js" id="js">
         <label for="js">JavaScript</label>
         <br>
         <input type="checkbox" v-model="checked" value="css" id="css">
         <label for="css">CSS</label>
         <br>
         <p>选择的项是：{{checked}}</p>
</div>
<script>
         var app = new Vue({
                   el:'#app',
                   data:{
                            checked:{'html','css'}
                   },
         })
</script>

选择列表：

选择列表就是下拉选择器，也是常见的表单控件，同样也分为单选和多选两种方式。

<div id="app">
         <select v-model="selected">
                   <option>html</option>
                   <option value='js'>JavaScript</option>
                   <option>css</option>
         </select>
         <p>选择的项是：{{selected}}</p>
</div>
<script>
         var app = new Vue({
                   el:'#app',
                   data:{
                            selected:'html'
                   },
         })
</script>

< option＞是备选项，如果含有value 属性， v-model 就会优先匹配value 的值： 如果没有， 就会直接匹配＜ option＞的text ，比如选中第二项时， selected 的值是js ， 而不是JavaScript 。给＜selected＞添加属性multiple 就可以多选了， 此时v -model 绑定的是一个数组， 与复选框用法类似

<select v-model = ”selected" multiple>

在业务中，＜ option＞经常用v -for 动态输出， value 和text 也是用v-bind 来动态输出的， 例如：

         <select v-model="selected">
                  <option v-for="option in options" 
                    :value="option.value">{{option.text}}</option>
         </select>
         <p>选择的项是：{{selected}}</p>

6.2 绑定值

上一节介绍的单选按钮、复选框和选择列表在单独使用或单选的模式下， v-model 绑定的值是一个静态字符串或布尔值， 但在业务中，有时需要绑定一个动态的数据， 这时可以用v-bind 来实现。

单选按钮:

<div id="app">
         <input type="radio" v-model="picked" :value="value">
         <label>单选按钮</label>
         <p>{{picked}}</p>
         <p>{{value}}</p>
</div>
<script>
         var app = new Vue({
                   el:'#app',
                   data:{
                            picked:false,
                            value:123
                   },
         })
</script>

在选中时，app.picked===app.value，值都是123。

复选框：

<div id="app">
         <input type="checkbox" v-model="toggle" :true-value:"value1" 
            :false-value:"value2">
         <label>复选框</label>
         <p>{{toggle}}</p>
         <p>{{value1}}</p>
         <p>{{value2}}</p>
</div>
<script>
         var app = new Vue({
                   el:'#app',
                   data:{
                            toggle:false,
                            value1:'a',
                            value2:'b',
                   },
         })
</script>

勾选时， app.toggle === app .valuel ; 未勾选时， app.toggle ＝==app.value2.

选择列表：

<div id="app">
     <select v-model="selected">
          <option :value="{number:123}">123</option>
     </select>
     {{selected.number}}
</div>
<script>
     var app = new Vue({
           el:'#app',
           data:{
                selected:''
           },
    })
</script>

当选中时， app.selected 是一个Object ，所以app.selected.number === 123 。

6.3 修饰符

与事件的修饰符类似， v-model 也有修饰符，用于控制数据同步的时机。

.lazy:

在输入框中， v-model 默认是在input 事件中同步输入框的数据（除了提示中介绍的中文输入法情况外），使用修饰符.lazy 会转变为在change 事件中同步，示例代码如下：

<div id="app">
       <input type="text" v-model.lazy="message">
       <p>输入的内容为：{{message}}</p>
</div>
<script>
        var app = new Vue({
            el:'#app',
            data:{
                  message:''
                  }
           })
</script>

这时，message不是实时改变的，只在失去焦点或者回车才更新。

.number

使用修饰符.number 可以将输入转换为Number 类型，否则虽然你输入的是数字，但它的类型其实是String ，比如在数字输入框时会比较有用

<input type=”number ” v-model.number=”message” >

.trim:

修饰符.trim 可以自动过滤输入的首尾空格，示例代码如下：

<input type=”text” v-model.trim=”message” >