表单与v-model
1、基本使用
<input type="text" v-model="msg" placeholder="输入...">
<p>输入的是:{{msg}}</p>
运行结果:
补充:使用v-model时,如果用中文输入法输入中文,一般在没有选定词组前,也就是在拼音阶段,Vue是不会更新数据的,敲下汉字时才会更新。
2、单选按钮
1、单选按钮单独使用:不需要v-model,直接使用v-bind绑定一个布尔类型的值,为真时选中,为false时不选。
<input type="radio" :checked="picked">
<label >单选按钮</label>
2、如果是组合使用来实现互斥选择的效果,需要v-model配合value来使用
<input type="radio" v-model="picked" value="you" >
<label>你</label>
<br />
<input type="radio" v-model="picked" value="me">
<label>我</label>
<br />
<input type="radio" v-model="picked" value="it" >
<label>他</label>
<br />
<p>pick的是:{{picked}}</p>
data: {
picked:'me'
},
运行结果:
当数据picked的值与单选按钮的value值一致时,就会选中该项。
3、复选框
<input type="checkbox" v-model="checked" value="you">
<label>你</label>
<br />
<input type="checkbox" v-model="checked" value="me">
<label>我</label>
<br />
<input type="checkbox" v-model="checked" value="it">
<label>它</label>
<br />
<p>pick的是:{{checked}}</p>
data: {
checked:['me','you']
}
运行结果:
原理:多个勾选框都绑定到同一个数组类型的数据,value的值在数组当中,就会选中这一项。
这一过程也是双向的,在勾选时,value的值也会自动push到这个数组当中。
4、选择列表(下拉菜单)
下拉菜单也有单选和多选。
1、单选
<select v-model="selected">
<option>html</option>
<option value="js">JavaScript</option>
<option>css</option>
</select>
<br/><br/><br/>
<p>选的课是:{{selected}}</p>
运行结果:
option是备选项,如果含有value属性,v-model会优先匹配value的值;如果没有,就直接匹配option的text,比如选中第二项时,selected的值是js,而不是JavaScript。
2、多选
给selected添加属性multiple就可以多选,此时v-mdel绑定的是一个数组,与复选框类似。
此时,按住Ctrl就可以多选。
3、在业务中,option经常用于v-for动态输出,value和text也是用v-bind来动态输出的。
<p>动态绑定下拉</p>
<select v-model="selected" multiple>
<option v-for="option in options" :value="option.value">{{option.name}}</option>
</select>
<br/><br/><br/>
<p>选的课是:{{selected}}</p>
data: {
selected:'html',
options:[
{
value:'html',
name:'html'
},
{
value:'JavaScript',
name:'js'
},
{
value:'css',
name:'css'
},
]
}
注:select虽然可以完成简单的下拉需求,但是在实际的额业务中不常用,因为他的样式依赖平台和浏览器,无法统一,也不太美观,功能也受限,所以常见的解决方案是用div模拟一个类似的空间,可以写一个下拉选择器的通用组件。
5、绑定值
1、单选按钮
<input type="checkbox" v-model="picked" :value="value">
<label>单选按钮</label>
<p>{{picked}}</p>
<p>{{value}}</p>
data: {
picked:false,
value:'123',
}
在选中时,app.picked === app.value,值都相同,都是123.
2、复选框
<input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
<label for="复选框"></label>
<p>{{toggle}}</p>
<p>{{value1}}</p>
<p>{{value2}}</p>
data: {
toggle:false,
value1:'a',
value2:'b',
}
勾选时,app.toggle === app.value1;未勾选时,app.toggle === app.value2。
3、选择列表
<select v-model="selected">
<option :value="{number:123}">123</option>
</select>
<div>选择的是:{{selected.number}}</div>
data: {
selected:''
}
当选中时,app.selected是一个object,所以app.selected.number === 123。
其实到这里,可能会有一点混乱,我也有一点,但是看了这篇文章:关于绑定中v-model的理解,对于v-model的值好像理解了很多。
6、修饰符
(1) .lazy
在输入框中,v-model默认实在input事件中同步输入框的数据,使用修饰符 .lazy会转变为在change事件中同步;
<input type="text" v-model.lazy="message">
<p>输入的值{{message}}</p>
此时,message不是实时改变的,而是在失焦或者按回车时才更新。
(2) .number
可以将输入类型转换为Number类型,否则虽然输入的是数字,但是其实他的类型是String类型;在数字输入框中会比较有用。
(3) .trim
自动过滤输入的首尾空格
参考文献:《vue.js实战》