Vue 表单与v-model

前面的话

表单控件承载了一个网页数据的录入与交互。表单控件在实际业务中较为常见，比如单选、多选、下拉选择、输入框等。 它们可以完成数据的录入、校验、提交等。Vue提供的v-model指令，用于表单类元素上的双向绑定。这篇文章将介绍如何使用指令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>

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

[文本域]

对于文本域也是同样的用法

 <div id="app1">
         <textarea  v-model="text" placeholder="请输入"></textarea>
         <p>输入的内容是：</p>
         <p style="white-space: pre">{{text}}</p>
  </div>
    <script>
    var app1 = new Vue({
        el: "#app1",
        data: {
            text: ''
        }
    })
  </script>

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

单选按钮

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

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

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

 <div id="app3">
         <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>    
        <p>选择的项是：{{picked}}</p>
    </div>
  <script>
	  var app3 = new Vue({
        el: "#app3",
        data: {
            picked: 'js'
        }
    })
</script>

复选框

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

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

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

组合使用时，也是v-model与value一起，多个勾选框都绑定到同一个数组类型的数据，value的值在数组中，就会选中这一项

  <div id="app5">
        <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 app5 = new Vue({
        el: "#app5",
        data: {
            checked: [
                'html','css'
            ]
        }
    })	
</script>

选择列表

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

[单选]

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

注意：< option >是备选项，如果含有value属性，v-model就会优先匹配value的值；如果没有，就会直接匹配的text，比如选中第二项时，selected的值是js,而不是JavaScript。

[多选]

给添加属性multiple就可以多选了，此时v-model绑定的是一个数组，与复选框的用法类似

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

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

  <div id="app8">
        <select v-model="selected">
            <option v-for="option in options" :value="option.value">{{option.text}}</option>
        </select>
        <p>选择的项是：{{selected}}</p>
  </div>
  <script>
	 var app8 = new Vue({
        el: '#app8',
        data: {
             selected: 'html',
             options : [
                 {
                     text: 'HTML',
                     value: 'html'
                 },
                 {
                    text: "JavaScript",
                    value: 'js'
                 },
                 {
                    text: 'CSS',
                    value: 'css'
                 }
             ]
        }
    })
</script>

绑定值

[单选框]

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

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

当选中时，picked=value=123

 <div id="app10">
     <input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
     <label for="">复选框</label>
     <p>{{toggle}}</p>
     <p>{{value1}}</p>
     <p>{{value2}}</p>
 </div>

[复选框]

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

当选中时，app10.toggle === app10.value1,未勾选时，app10.toggle === app10.value2

[选择列表]

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

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

修饰符

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

[.lazy]

在输入框中，v-model默认是在input事件中同步输入框的数据。使用修饰符.lazy会转变在change事件中同步。

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

这时，message并不是实时改变的，而是在失焦或按回车时才更新

[.number]

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

比如在数字输入框时会比较有用：

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

[.trim]

修饰符.trim可以自动过滤输入的首尾空格

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