vue.js学习笔记——表单与v-model

Vue.js提供了v-model指令，用于在表单类元素上双向绑定数据。

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

单选按钮：

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

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

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

当picked的值与单选按钮value值一致的时候，就会选中该项。

复选框：

复选框单独使用时，也是用v-model来绑定一个布尔值，在组合使用时，也是v-model与value一起，多个勾选框都绑定到同一个数组类型的数据。这个过程也是双向的，value的值也会自动push到这个数组上。

选择列表：

选择列表就是下拉选择器，也是常见的表单控件，同时也分为单选和多选。

<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 src="https://vuejs.org/js/vue.min.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            selected:[]
        }
    })
</script>

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

给<selected>添加属性multiple就可以多选了，此时v-model绑定的是一个数组。

绑定值：

在业务中，有时需要绑定一个动态的数据；

<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 src="https://vuejs.org/js/vue.min.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            toggle:true,
            value1:'a',
            value2:'b'
        }
    })
</script>