表單和v-model

Vue提供了v-model指令，用於<input> <textarea> <select>等表單類元素上雙向繫結事件。

基本用法

<div id='app'>
    <input v-model='value' type="text">
    {{value}}
</div>
複製程式碼

var app = new Vue({
    el:'#app',
    data:{
        value:''
    }
})
複製程式碼

此時在輸入框中輸入文字就能實時更新到頁面中。

---

單選框

<div id="app">
  <input type="radio" v-bind:checked="onradio">
  <!--不可以用v-model-->
</div>
複製程式碼

 var app = new Vue({
    el:'#app',
    data:{
        onradio: true
    }
 })
複製程式碼

此時展現的是一個預設選中的單選框。

多個單選框

    微笑：<input type="radio" name='ww' value="微笑" v-model='checkname '>
    哭泣：<input type="radio" name='ww' value="哭泣" v-model='checkname '>
    狂歡：<input type="radio" name='ww' value="狂歡" v-model='checkname '>
    現在選中的是：{{checkname}}
複製程式碼

name相同，才能實現單選。

var app = new Vue({
    el:'#app',
    data:{
        checkname:''
    }
})
複製程式碼

現在選中誰,就會將其value中的值實時更新。

---

核取方塊

單個核取方塊：

<input v-bind:clicked="onradio" type='checkbox'>
<!-- 用v-model同樣可以哦，但是單個單選框是不行的。 -->
複製程式碼

如果onradio對應的是true，那麼效果就像下面這樣：

多個核取方塊

<div id='app'>
    <input value='嘿嘿' v-model='checkboxName' type='checkbox'>
    <input value='哈哈' v-model="checkboxName" type='checkbox'>
    <input value='啵啵' v-model='checkboxName' type='checkbox'>
    {{checkboxName}}
</div>
複製程式碼

var app = new Vue({
    el:'#app',
    data:{
        checkboxName:[]        //注意這裡是陣列哦，因為使用字串的話就是bool值了，click one is all
    }
})
複製程式碼

---

下拉框

單個下拉框

<select id='app' v-model='selected'>
    <option value='哈哈'>哈哈</option>
    <option value='嘿嘿'>嘿嘿</option>
    <option value='啵啵'>啵啵</option>
</select>
複製程式碼

var app = new Vue({
    el:'#app',
    data:{
        selected:''    //陣列也可以哦
    }
})
複製程式碼

多個下拉框

多個下拉框時只要在<select>元素中加入一個屬性multiple即可。其初始化值即可是陣列也可是字串。只要按住ctrl鍵即可多選：

建議單選初始化給字串，因為此時初始化繫結的是布林值或者字串；多選初始化的時候給陣列。

---

繫結值

1. 單個按鈕不能用v-model，只能用v-bind.
2. 核取方塊

<input id="app" type="checkbox" v-model="toggle" :true-value='tvalue' :false-value="fvalue"> 
  {{toggle}} 
  <br>被選中 ---{{toggle === tvalue}} 
  <br>未被選中---{{toggle === fvalue}}
複製程式碼

 var app = new Vue({
    el:'#app',
    data:{
        toggle:true,
        tvalue:"我被選中了"，
        fvalue:'我沒被選中'
    }
 })
複製程式碼

3. 給下拉框繫結value值對option沒有影響。