5.表单与v-model

1.表单类控件承载了一个网页数据的录入与交互。
2.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>

在输入框输入的同事，{{message}}会实时将内容渲染在视图中。文本域也一样，如：

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

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

<div id="app">
    <input type="text" @input="handleInput" placeholder="输入...">
    <br><br><br><br><br><br>
    <p>输入的内容是：{{message}}</p>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            message:''
        },
        methods:{
            handleInput:function(e){
                this.message = e.target.value;
            }
        }
    })
</script>

（QQ拼音输入法就不灵）
3.单选按钮在单独使用时，不需要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">JavsScript</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。
4.复选框也分单独使用和组合使用，不过用法稍与单选不同。复选框单独使用时，也是用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">JavsScript</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>

5.选择列表就是下拉选择器，也分为单选和多选两种方式。示例：

<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。
给<select>添加属性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','css']
        }
    })
</script>

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

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

虽然用选择列表<select>控件可以很简单地完成下拉选择的需求，但是在实际业务中反而不常用，因为它的样式依赖平台和浏览器，无法统一，也不太美观，功能也受限，比如不支持搜索，所以场景的解决方案是用div模拟一个类似的控件。
6.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.value1;未勾选时，app.toggle===app.value2
选择列表：

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

当选中时，app.selected是一个Object，所以app.selected.number===123
7.与事件的修饰符类似，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，比如在数字输入框时会比较有用，示例：

<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>