表单和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没有影响。