表单控件在实际的业务场景中是比较常见的,单选,多选,下拉选择,输入框等,用这些控件可以完成数据的录入、校验以及提交等。vue给我们提供了v-model指令用于在表单类元素上双向绑定数据。
1.input上v-model的使用
<template>
<div>
<input type="text" v-model="message" placeholder="请输入..."/>
<p>输入的内容是:{{message}}</p>
</div>
</template>
<script>
export default {
name: "VModel",
data() {
return {
message: ''
}
}
}
</script>
<style scoped>
</style>
当我们在输入框内输入的同时,下面的{{message}}的内容也会实时将内容渲染在视图中,如下:
同样的在文本域中的使用和在input中的使用是一致的,拿上面的代码我们将input替换为textarea:
<textarea v-model="message" placeholder="请输入..."/>
运行程序:
在这里我们需要提醒一下,在我们输入中文的时候,只有我们敲下汉字时才会触发视图更新,在我们输入拼音的阶段,视图是不会被更新的。
如果我们想实时的更新视图,此时我们可以使用@input来代替v-model。
<textarea @input="handleMessage" placeholder="请输入..."/>
此时,我们需要添加处理函数handleMessage:
handleMessage(e){
console.log(e.target)
this.message = e.target.value
}
2.单选按钮使用v-model
单选按钮在单独使用的时候不需要使用v-model,可以直接使用v-bind来绑定一个布尔类型的值:
<input type="radio" :checked="picked" @click="pickedClick()"/>
<label>只有一个单选按钮的使用</label>
data数据:
picked: false
这里我们给单选按钮添加一个click事件,点击时切换选中状态:
pickedClick() {
console.log("before click:" + this.picked)
this.picked = !this.picked
console.log("after click:" + this.picked)
}
运行效果:
点击后:
当我们组合使用radio来实现互斥选择效果的时候,就需要使用v-model和value配合来达到我们想要的效果:
<input type="radio" id="vue" v-model="selectedRadio" value="vue"/>
<label for="vue">VUE</label>
<input type="radio" id="js" v-model="selectedRadio" value="js"/>
<label for="js">JS</label>
<input type="radio" id="css" v-model="selectedRadio" value="css"/>
<label for="css">CSS</label>
<p>当前选择的是:{{selectedRadio}}</p>
data数据:
selectedRadio: 'vue',
运行程序:
当v-mode绑定的值selectedRadio和value的值一致时,就会选中该项。
这里我们需要明白的就是当我们选中一个单选按钮的时候,v-model绑定的值会更改为当前单选按钮的value值,此时两者的值是相等的,所以该单选按钮就被选中了。
3.复选框使用v-model
复选框使用v-model和单选按钮的用法基本一致,这里只说明一下稍微有差异的地方,在组合使用复选框时,也是v-model和value配合使用,多个复选框都绑定到同一个数组类型的数据,value的值在数组中,就会选中这一项,在勾选时,value的值会添加到这个数组中:
<input type="checkbox" id="vue" v-model="checked" value="vue"/>
<label for="vue">VUE</label>
<input type="checkbox" id="js" v-model="checked" value="js"/>
<label for="js">JS</label>
<input type="checkbox" id="css" v-model="checked" value="css"/>
<label for="css">CSS</label>
<p>当前选择的是:{{checked}}</p>
data数据:
checked: ['vue']
运行效果图:
然后我们勾选其他复选框:
4.选择列表
<select v-model="selected" >
<option v-for="option in options" :value="option.value">
{{option.text}}
</option>
</select>
<p>当前选择的是:{{selected}}</p>
这里multiple属性是指定可以多选,此时v-model绑定的是一个数组,data数据如下:
selected: ['vue']
然后我们看下options数组的定义:
options:
[
{
text: 'VUE',
value: 'vue'
},
{
text: 'JS',
value: 'js'
},
{
text: 'CSS',
value: 'css'
}
],
运行效果:
这里我们使用shift或者ctrl来进行多选:
如果我们使用单选模式,那么selected的定义应该如下:
selected: 'vue'
效果图:
这里还有一个地方值得我们留意的:
<option v-for="option in options" :value="option.value">
那就是在这里我们绑定了value的值,如果含有value值,那么v-model会优先匹配value值,如果没有,则直接匹配option的text。
下面我们介绍几个和v-model相关的几个修饰符,这些修饰符用于控制数据同步的时机。
1.lazy
在输入框中,v-model默认是在input事件中同步输入框的数据的,使用修饰符lazy则会变为在change事件中同步,如下
<input type="text" v-model.lazy="message"/>
<p>当前输入是:{{message}}</p>
运行程序:
然后输入文字:
可以看到p标签内的数据并没有实时更新,当输入框失去焦点或者按下回车键时,视图重新渲染:
2.number
使用该修饰符可以将输入转化为Number类型,否则我们得到的数据的类型是String。
<input type="text" v-model.number="message"/>
<p>当前输入是:{{message}}</p>
data数据:
message: 123,
程序运行效果:
当我们输入非数字的时候:
p标签的内容并没有更新,当输入框失去焦点的时候,会回复原来的数字值。
但是有一点大家需要小心,即使我们使用了修饰符number,如果我们给绑定的值赋初始值为String类型时,这个修饰符是不会起作用的。
比如:
message: 'dd123'
<input type="text" v-model.number="message"/>
<p>当前输入是:{{message}}</p>
然后我们运行程序:
这一点大家需要留心一下,我估计这也是vue的一个小bug吧。。
3.trim
这个修饰符可以自动过滤输入的首尾空格:
message: ' dd123 '
<input type="text" v-model.trim="message"/>
<p>当前输入是:{{message}}</p>
运行效果:
然后我们接着输入空格在末尾:
失去焦点后,重新进入输入框,通过光标大家也可以看到,首尾的空格被移除了。