Vue_v-model

刚才的v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。

既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有：

• input

• select

• textarea

• checkbox

• radio

• components（Vue中的自定义组件）

基本上除了最后一项，其它都是表单的输入项。

举例：

html：

<div id="app">
    <input type="checkbox" v-model="language" value="Java" />Java<br/>
    <input type="checkbox" v-model="language" value="PHP" />PHP<br/>
    <input type="checkbox" v-model="language" value="Swift" />Swift<br/>
    <h1>
        你选择了：{{language.join(',')}}
    </h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            language: []
        }
    })
</script>

• 多个CheckBox对应一个model时，model的类型是一个数组，单个checkbox值默认是boolean类型

• radio对应的值是input的value值

• text 和textarea 默认对应的model是字符串

• select单选对应字符串，多选对应也是数组

效果：