今天主要學習一下表單輸入繫結。v-model指令在表單<input> <textarea> <select> 等元素上建立雙向資料繫結。它會根據控制元件型別自動選取正確的方法來更新資料。
  v-model會忽略所有表單元素的value、checked、selected、特性的初始值，而總是將Vue例項的資料作為資料來源。你應該通過Javascript在元件的data選項中宣告初始值。
  對於需要使用輸入法 (如中文、日文、韓文等) 的語言，你會發現 v-model 不會在輸入法組合文字過程中得到更新。如果你也想處理這個過程，請使用 input 事件。

文字

<template>
    <div>
        <input v-model="message" placeholder="input message" />
        <br/>
        <span>Message is :{{message}}</span>
    </div>
</template>
<script>
    export default{
        name:'HelloWorld',
        data (){
            return
 
 {
                message:''
            }
        }
    }
</script>

執行後，可以看到輸入的內容可以動態的顯示出來。

多行文字

<template>
    <div>
        <textarea v-model="message" placeholder="input message" > </textarea> 
        <br/>
        <span>Message is :{{message}}</span
 
>
    </div>
</template>
<script>
    export default{
        name:'HelloWorld',
        data (){
            return {
                message:''
            }
        }
    }
</script>

執行後可以看到一個文字輸入框，輸入多行文字都能實時的顯示更新出來。

單個複選框

單個複選框，繫結的值時bool值,這個和input的value無關，具體程式碼如下：

<template>
    <div>
    <input type="checkbox" id="checkbox1" v-model="checked" />
    <br/>
    <span>checked: {{checked}}</span>
    </div>
</template>
<script>
    export default{
        name:'HelloWorld',
        data (){
            return {
                checked:''//注意；如果此處checked為非陣列型別，選中後結果為bool值
            }
        }
    }
</script>

大家可以嘗試下，<input type="checkbox" id="checkbox1" value="張三" v-model="checked" />選中後仍然是bool值。當然瞭如果大家想使用自定義的值時，可以使用這兩個欄位true-value，false-value，具體程式碼如下：

<template>
    <div>
    <input type="checkbox" id="checkbox" v-model="checked" true-value="AAA"
  false-value="BBB">
    <label for="checkbox">{{ checked }}</label>
    </div>
</template>
<script>
    export default{
        name:'HelloWorld',
        data (){
            return {
                checked:''
            }
        }
    }
</script>

程式碼執行起來後，可以看到選中後顯示AAA，取消選中時顯示BBB。

多個複選框

  true-value和false-value只適合同一個checkbox組只有一個checkbox的情況，如果有多個checkbox,請使用value進行值繫結。

<template>
    <div>
    <input type="checkbox" id="checkbox1" value="張三" v-model="checked" />
    <br/>
    <input type="checkbox" id="checkbox2" value="李四" v-model="checked" />
    <br/>
    <input type="checkbox" id="checkbox3" value="王五" v-model="checked" />
    <br/>
    <span>checked: {{checked}}</span>
    </div>
</template>
<script>
    export default{
        name:'HelloWorld',
        data (){
            return {
                checked:[]
            }
        }
    }
</script>

通過選中不同的選項，大家可以發現自己選中的內容可以實時更新。

選擇框

1，單選時，程式碼如下：

<template>
    <div>
    <select v-model="selected">
        <option disabled value="">請選擇</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    </div>
</template>
<script>
    export default{
        name:'HelloWorld',
        data (){
            return {
                selected:''//當然我們也可以在這個地方設定預設選中項
            }
        }
    }
</script>

執行程式碼後大家可以看到點選請選擇，就可以選擇自己要選中的選項。

2，多選時，程式碼如下：

<template>
    <div>
    <select v-model="selected" multiple style="width: 50px;">
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <br/>
    <span>selected is:{{selected}}</span>
    </div>
</template>
<script>
    export default{
        name:'HelloWorld',
        data (){
            return {
                selected:[]
            }
        }
    }
</script>

v-for和複選框結合起來使用，程式碼如下：

<template>
    <div>
    <select v-model="selected" multiple style="width: 50px;">
        <option v-for="option in options" :value="option.value">
        {{option.text}}
        </option>

    </select>
    <br/>
    <span>selected is:{{selected}}</span>
    </div>
</template>
<script>
    export default{
        name:'HelloWorld',
        data (){
            return {
                selected:[],
                options:[
                        {text:"A",value:'A'},
                        {text:"B",value:'B'},
                        {text:"C",value:'C'}
                ]
            }
        }
    }
</script>

執行後可以看到和上面同樣的效果

值繫結

  對於單選按鈕，複選框以及選擇框的選項，v-model繫結的值通常是靜態字串（對於複選框也可以是布林值）。但是有時我們可能想把值繫結到 Vue 例項的一個動態屬性上，這時可以用 v-bind 實現，並且這個屬性的值可以不是字串。

單選按鈕

<template>
    <div>
    <input type="radio" name="name" v-model="pick" value="a" /><label>a</label>
    <br/>
    <input type="radio" name="name" v-model="pick" value="b" /><label>b</label>
    <br/>
    <input type="radio" name="name" v-model="pick" value="c" /><label>c</label>
    <br/>
    <span>picked: {{pick}}</span>
    </div>
</template>
<script>
    export default{
        name:'HelloWorld',
        data (){
            return {
                pick:''
            }
        }
    }
</script>

執行後，可以看到選中後，選中的值顯示在下面。
更多優質文章，可以微信掃碼關注：