[Book]Vue.js權威指南（臉譜）第五章表單控件綁定

第五章表單控件綁定

在web應用中，經常使用表單向服務端提交一些數據，而在表單中綁定一些如input、change等事件對用戶輸入的數據進行校驗、更新等操作。

在vue.js中、我們可以使用v-model指令同步用戶輸入的數據到vue實例data屬性中，同時會對radio、CheckBox、select等原生表單組件提供一些語法糖使表單操作更加容易。

一.基本用法

1. text

<div id="box" >
    <span>Welcome {{name}} join China</span>
    <hr>
    <input type="text" v-model="name" placeholder="join China">
</div>

2. checkbox

<div id="box" >
    <input type="checkbox" id="cb" v-model="checked">
    <label for="cb">{{checked}}</label>
</div>
<script>
    new Vue({
        el:'#box',
        data: {
            checked:''
        }
    });
</script>

用戶選中則爲true，不選則爲false

<div id="box" >
    <input type="checkbox" id="flash" value="快車" v-model="bizLines">
    <label for="flash">快車</label>

    <input type="checkbox" id="premium" value="專車" v-model="bizLines">
    <label for="premium">專車</label>

    <input type="checkbox" id="bus" value="巴士" v-model="bizLines">
    <label for="bus">巴士</label>
    <br>
    <span>Checked lines : {{bizLines | json}}</span>
</div>
<script>
    new Vue({
        el:'#box',
        data: {
            bizLines:[],
        }
    });
</script>

3. radio
   當單選按鈕被選中時，v-model中的變量值會被賦值爲對應的value值

4. select
   select控件分爲單選和多選，所以v-model在select控件的單選和多選上會有不同的表現。
   單選

<div id="box" >
    <select v-model="bizLine">
        <option value="快車value" selected>快車</option>
        <option value="專車value">專車</option>
        <option value="巴士value">巴士</option>
    </select>
    <br>
    <span>Selected : {{bizLine}}</span>
</div>
<script>
    new Vue({
        el:'#box',
        data: {
            bizLine:[],
        }
    });
</script>

多選

multiple 屬性規定可同時選擇多個選項，即多選，

對於 windows：按住 Ctrl 按鈕+點擊來選擇多個選項；

對於 Mac：按住 command 按鈕+點擊來選擇多個選項；

<div id="box" >
    <label>
        <select v-model='workplaces' multiple="multiple">
            <option v-for='city in cities' :value='city.value'>
                {{ city.text }}
            </option>
        </select>
    </label>
    <p>workplace: {{ workplaces.join('|') }}</p>
</div>
<script>
    new Vue({
        el:'#box',
        data: {
            cities: [
                {text: '西安', value: '西安'},
                {text: '洛陽', value: '洛陽'},
                {text: '南京', value: '南京'},
                {text: '北京', value: '北京'}
            ],
            workplaces: []
        }
    });
</script>

二.值綁定

通常情況下，對於radio、checkbox、select組件，通過v-model綁定的值都是字符串，checkbox除外，checkbox可能是布爾值

通過v-bind來代替直接使用value屬性，也可以綁定非字符串的值，如數值、對象、數組等。

1. checkbox
   注意：:true-value="" :false-value=""只適合同一個checkbox組只有一個checkbox的情況。如果有多個checkbox，請使用:value進行值綁定。

<div id="box">
    <label for="flash">{{flash.name}}</label>
    <input type="checkbox" v-model="toggle" :value ="flash">

    <label for="premium">{{premium.name}}</label>
    <input type="checkbox" v-model="toggle" :value ="premium">

    <label for="bus">{{bus.name}}</label>
    <input type="checkbox" v-model="toggle" :value ="bus">
</div>

<script>
    new Vue({
        el:'#box',
        data: {
            flash:{ name:'快車'},
            premium:{ name:'專車'},
            bus:{ name:'巴士'},
            toggle:[]
        }
    });
</script>

2. radio

<div id="box">
    <input type="radio" v-model="pick" :value="a">
</div>

3. select

<p>用戶勾選時，vm.selected === {number:123}</p>
<div id="box">
    <select name="" id="" v-model="selected">
        <option :value="{ number:123}">123</option>
    </select>
</div>

v-model 修飾指令

v-model 用來在視圖與Model之間同步數據，但是有時候我們需要控制同步發生的時機，或者在數據同步到Model之前將數據轉換爲Number類型。

我們可以在v-model指令所在的form控件上添加相應的修飾指令來實現這個需求。

1. lazy 在默認情況下，v-model在input事件中同步輸入框的值與數據，可以添加一個lazy特性，從而改到在change事件中去同步。

<div id="box">
    <input type="text" v-model="msg" lazy>
    <br>
    {{msg}}
</div>

<script>
    new Vue({
        el:'#box',
        data: {
            msg:'alice88'
        }
    });
</script>

2. debounce 設置一個最小的延時，在每次敲擊之後延時同步輸入框的值到Model中。
如果每次更新都要進行高耗操作（ajax請求）時較有用。

<p>debounce</p>
<input type="text" v-model="msg1" debounce="500">
<br>
{{msg1}}

3. number 當傳到後端的字段類型必須是數值的時候，我們可以在v-model所在控件上使用number指令，該指令會在用戶輸入被同步到Model中時將其轉換爲數值類型，如果轉換結果爲NaN，則對應的Model值還是用戶輸入的原始值。