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>

1.4 單選框（radio）

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

1.5 下拉框（select）

1.5.1 單選select

<div id="app">
    <select v-model="selected">
        <option disabled>請選擇</option>
        <option v-for="option in options" v-bind:value="option.value">
            {{ option.text }}
        </option>
    </select>
    <div>選擇項：{{ selected }}</div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            selected: "1",
            options: [{
                    text: "A",
                    value: "1"
                },
                {
                    text: "B",
                    value: "2"
                },
                {
                    text: "C",
                    value: "3"
                }
            ]
        }
    });
</script>

1.5.2 多選select

<div id="app">
    <select v-model="selected" multiple>
        <option disabled>請選擇</option>
        <option v-for="option in options" v-bind:value="option.value">
            {{ option.text }}
        </option>
    </select>
    <div>選擇項：{{ selected }}</div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            selected: "1",
            options: [{
                    text: "A",
                    value: "1"
                },
                {
                    text: "B",
                    value: "2"
                },
                {
                    text: "C",
                    value: "3"
                }
            ]
        }
    });
</script>

2. 與value屬性繫結

　　對於 radio, checkbox 和 select 的 option 選項，通常可以將 v-model 與值是靜態字串的 value 屬性關聯。

2.1 checkbox

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

3. 修飾符（modifiers）

3.1 .lazy

　　預設情況下，v-model 會在每次 input 事件觸發之後，將資料同步至 input 元素中（除了上述提到的輸入法組合文字時不會）。

　　可以新增 lazy 修飾符，從而轉為在觸發 change 事件後同步。

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

3.2 .number

<div id="app">
    <input type="number" v-model.number="age" />
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            age: 10
        }
    });
</script>

3.3 .trim

　　v-model.trim：自動過濾掉首尾空格

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