基本用法
表单控件在实际业务较为常见,比如单选、多选、下拉选择、输入框等,用它们可以完成数据的录入、校验、提交等。
<div id="app">
<input type="text" v-model="message" placeholder="输入...">
<p>输入的内容是:{{message}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
}
});
</script>
使用v-model后,表单控件显示的值只依赖所绑定的数据,不再关心初始化时的value属性,对于在< textarea >中插入的值也不会生效。
使用v-model时,如果是用中文输入法输入中文,一般在没有选定词组前,也就是在拼音阶段,Vue是不会更新数据的,当敲下汉字时才会触发更新。如果希望总是实时更新,可以用@input来替代v-model。
单选按钮:
单选按钮在单独使用时,不需要v-model,直接使用v-bind绑定一个布尔类型的值,为真时选中,为否时不选。
如果是组合使用来实现互斥选择的效果,就需要v-model配合value来使用:
<div id="myApp">
<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">JavaScript</label>
<br>
<input type="radio" v-model="picked" value="css" id="css">
<label for="css">CSS</label>
<br>
<p>选择的项是:{{picked}}</p>
</div>
<script>
var myApp = new Vue({
el: '#myApp',
data: {
picked: 'js'
}
});
</script>
复选框:
复选框也分单独使用和组合使用,不过用法与单选不同。复选框单独使用时,也是用v-model来绑定一个布尔值。
组合使用时,也是v-model与value一起,多个勾选框都绑定到一个数组类型的数据,value的值在数组当中,就会选中这一项。这一过程也是双向的,在勾选时,value的值也会自动push到这个数组中。
<div id="app">
<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">JavaScript</label>
<br>
<input type="checkbox" v-model="checked" value="css" id="css">
<label for="css">CSS</label>
<br>
<p>选择的项是:{{checked}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data:
checked: ['html', 'css']
}
});
</script>
选择列表
选择列表就是下拉选择器,也是常见的表单控制件,同样也分为单选和多选两种方式。
<div id="app">
<select v-model="selected">
<option>html</option>
<option value="js">JavaScript</option>
<option>css</option>
</select>
<p>选择的项是:{{selected}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
selected:'html'
}
});
</script>
option是备选项,如果含有value属性,v-model就会优先匹配value的值;如果没有,就会直接匹配option的text,比如选中第二选项时,selected的值是js,而不是JavaScript。
给select标签添加属性multiple就可以多选,此时v-model绑定的是一个数组,与复选框用法类似。 ```html
选择的项是:{{selected}}
在业务中,option标签经常用v-for动态输出,value和text也是用v-bing动态输出的:
<div id="app">
<select v-model="selected" multiple>
<option v-for="option in options" :value="option.value">{{option.text}}</option>
</select>
<p>选择的项是:{{selected}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
selected:'html',
options: [
{
text:'HTML',
value:'html'
},
{
text:'JavaScript',
value:'js'
},
{
text:'CSS',
value:'css'
}
]
}
});
</script>