09.vue.js实战笔记（表单与v-model）

1.v-model

v-model 用于在表单类元素上双向绑定数据：

<input type="text" v-model="message" placeholder="输入...">
<p>输入的内容是:{{message}}</p>

需要注意的一点是，如果使用中文输入法输入中文时，在拼音阶段vue不会实时更新数据，敲下汉字才会触发更新；

若希望总是实时更新，可用@input代替v-model：

<input type="text" @input="handleInput" placeholder="输入...">
<p>输入的内容是:{{message}}</p>

handleInput(e){
    this.message = e.target.value
}

（1）单选按钮

单选按钮单独使用不需要v-model，直接用v-bind绑定布尔值，为真时选中，为否时不选：

<input type="radio" :checked="picked">
<label>单选按钮</label>

data:{
    picked:true
}

组合使用达到互斥效果需要v-model，配合value使用（当v-model绑定的数据与value值一致时选中）：

<input type="radio" v-model="picked" value="html" id="html">
<label for="html">HTML</label>
<br>
<input type="radio" v-model="picked" value="js" id="js">
<label for="js">JS</label>
<br>
<input type="radio" v-model="picked" value="css" id="css">
<label for="css">CSS</label>
<br>
<p>选择的项是：{{picked}}</p>

data:{
    picked:'css'
}

上边代码最后选中的是第三项CSS。

（2）复选框

单独使用也用v-model：

<input type="checkbox" v-model="checked" id="checked">
<label for="checked">选择状态：{{checked}}</label>

var app = new Vue({
    el:'#app',
    data:{
       checked:false
    }
})

组合使用同样也是v-model和value配合使用（v-model绑定的是数组）：

<input type="checkbox" v-model="checked" value="html" id="html">
<label for="html">HTML</label>
<br>
<input type="checkbox" v-model="checked" value="js" id="js">
<label for="js">JS</label>
<br>
<input type="checkbox" v-model="checked" value="css" id="css">
<label for="css">CSS</label>
<br>
<p>选择的项是：{{checked}}</p>

data:{
    picked:['html','css']
}

（3）选择列表

也就是下拉选择器，<option>是备选项，如果含有value属性，v-model会优先匹配value，如果没有，就直接匹配<option>的text

给<select>添加属性multiple就可以多选了，此时v-model绑定的是数组；

通常<option>会用v-for动态输出。

2.绑定值

v-bind绑定---单选按钮：

<input type="radio" v-model="picked" :value="value">
<label>单选按钮</label>
<p>{{picked}}</p>
<p>{{value}}</p>

var app = new Vue({
    el:'#app',
    data:{
       picked:false,
       value:123
    }
})

没选中单选按钮之前，picked为false，选中之后，picked和value都为123（因为使用v-bind绑定了value）

v-bind绑定---复选框：

<input type="checkbox" v-model="picked" :true-value="value1" :false-value="value2">
<label>复选框</label>
<p>{{picked}}</p>
<p>{{value1}}</p>
<p>{{value2}}</p>

var app = new Vue({
     el:'#app',
     data:{
        picked:false,
        value1:'a',
        value2:'b'
     }
})

勾选时，app.picked === app.value1，未勾选时，app.picked === app.value2

v-bind绑定---选择列表：

<select v-model="selected">
<option :value="{number :123}">123</option>
</select>
<p>{{selected.number}}</p>

var app = new Vue({
   el:'#app',
   data:{
      selected:''
   }
})

当选中时，app.selected是一个object，所以app.selected.number===123

3.修饰符

v-model修饰符用于控制数据同步的时机

（1）.lazy   在change事件（失焦或按回车时）同步输入框的数据

<input type="text" v-model.lazy="message">
<p>{{message}}</p>

这时，message并不是实时改变的，而是在失焦或按回车时才更新

（2）.number     可以将输入转换为Number类型，否则，即使输入的是数字，也还是string类型

<input type="number" v-model.number="message">
<p>{{ typeof message}}</p>

这时，message的类型为数值类型

（3）.trim  可以自动过滤输入的首尾空格

<input type="text" v-model.trim="message">
<p>{{message}}</p>

若message为' aynu ' ，过滤之后为'aynu'