Vue.js实战学习-表单与v-model

一.基本用法

     Vue.js提供了v-model指令，用于在表单类元素上双向绑定数据，如在输入框上使用时，输入的内容会实时映射到绑定的数据上。

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

     在输入框输入的同时， {{ messsage }} 也会实时将内容渲染在视图中。 

     提示：使用v-model后，表单控件显示的值只依赖所绑定的数据, 不再关心初始化时的value属性，对于在<textarea></textarea> 之间插入的值，也不会生效。

    单选按钮：

    单选按钮在单独使用时，不需要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>

      数据picked的值与单选按钮的value值一致时，就会选中该项，所以当前状态下选中的是第二项JavaScript。

      复选框：

      复选框也分单独使用和组合使用，不过用法稍与单选不同。复选框单独使用时，也是用v-model来绑定一个布尔值。

<div id="app">
   <input type="checkbox" v-model="checked" id="checked">
   <label for="checked">选择状态: {{ checked }}</label>
</div>
<script>
   var app = new Vue ({
      el: '#app',
      data: {
        checked: false
      }
   })
</script>

        在勾选时，数据checked的值变为了true，label中渲染的内容也会更新。   

        组合使用时，也是v-model与value一起，多个勾选框都绑定到同一个数组类型的数据，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绑定的是一个数组，与复选框用法类似。   

<div id="app">
   <select v-model="selected" multiple>
      <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', 'js']
      }
   })
</script>

二.  绑定值

       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="checked"
      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.value1; 未勾选时，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。

三.修饰符

      与事件的修饰符类似，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类型，否则虽然你输入的是数字，但它的类型其实是Sting，比如在数字输入框时会比较有用，如：

<div id="app">
   <input type="number" v-model.number="message">
   <p> {{ typeof message }}</p>
</div>
<script>
   var app = new Vue ({
      el: '#app',
      data: {
        message: 123
      }
   })
</script>

      .trim:

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

<div id="app">
   <input type="text" v-model.trim="message">
   <p>{{ message }}</p>
</div>
<script>
   var app = new Vue ({
      el: '#app',
      data: {
         message: ''
      }
   })
</script>