Vue.js 2.x笔记：表单绑定（3）

1. 基础用法

　　v-model 指令：在表单 input 和 textarea 元素上创建双向数据绑定。

1.1 单行文本（Text）

<div id="app">
    <input type="text" v-model="name">
    <p>name：{{ name }}</p>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: "LiBing"
        }
    });
</script>

1.2 多行文本（Multiple Text）

<div id="app">
    <textarea v-model="remark"></textarea>
    <p>remark{{ remark }}</p>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            remark: "备注"
        }
    });
</script>

注：在 textarea 中插值（<textarea>{{text}}</textarea>）并不会生效。使用 v-model 来替代。

1.3 checkbox

　　单选 checkbox，绑定到布尔值。

<div id="app">
    <input type="checkbox" id="chkIsDefault" v-model="isDefault"/>
    <label for="chkIsDefault">{{ isDefault ? "是" : "否" }}</label>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            isDefault: true
        }
    });
</script>

　　多选 checkbox，绑定到同一个数组。

<div id="app">
    <template v-for="fruit in fruits">
        <input type="checkbox" :id="fruit.id" :value="fruit.text" v-model="checkedFruits" />
        <label :for="fruit.id">{{ fruit.text }}</label>
    </template>
    <div>选择的水果：{{ checkedFruits }}</div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            fruits: [{
                    id: "apple",
                    text: "苹果"
                },
                {
                    id: "banana",
                    text: "香蕉"
                },
                {
                    id: "grape",
                    text: "葡萄"
                }
            ],
            checkedFruits: ["苹果"]
        }
    });
</script>