vue中表单主要通过v-model实现数据的双向绑定，实现原理主要通过javascript的object.defineproperty方法。v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。
1.1 一般的数据绑定，数据填充表单才会更新视图
1
2
3
4
| <div id="root">
<input type="text" v-model="message" placeholder="请输入">
<p>输入的内容是： {{message}}</p>
</div>
|
1
2
3
4
5
6
| new Vue({
el: "#root",
data: {
message: ''
}
})
|
1
2
3
4
| <div id="root">
<input type="text" @input="handleInput" placeholder="请输入">
<p>输入的内容是： {{message}}</p>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
| new Vue({
el: "#root",
data: {
message: ''
},
methods: {
handleInput: function(e){
this.message = e.target.value;
}
}
})
|
二、radio
2.1 单个radio使用，只需要通过v-bind绑定checked属性值
1
2
3
4
5
| <div id="root">
<label>单个单选</label>
<input type="radio" :checked="picked">
<p>目前状态是： {{picked}}</p>
</div>
|
1
2
3
4
5
6
| new Vue({
el: "#root",
data: {
picked: true
}
})
|
2.2 多个radio组合使用，需要借助v-model绑定相同的数据，当数据值和radio的value值相同，才会被选中
1
2
3
4
5
6
7
8
9
| <div id="root">
<label for="html">HTML</label>
<input type="radio" v-model="picked1" value="html" id="html">
<label for="js">javascript</label>
<input type="radio" v-model="picked1" value="js" id="js">
<label for="css">css</label>
<input type="radio" v-model="picked1" value="css" id="css">
<p>输入的内容是： {{picked1}}</p>
</div>
|
1
2
3
4
5
6
| new Vue({
el: "#root",
data: {
picked1: "js"
}
})
|
三、checkbox
checkbox和radio也是分单个和组合使用，不同的是单个使用需要v-model绑定一个布尔值，多个使用绑定的是一个数组
3.1 单个checkbox使用，需要通过v-model绑定checked值
1
2
3
4
5
| <div id="root">
<label>单个复选</label>
<input type="checkbox" v-model="checked">
<p>目前状态是： {{checked}}</p>
</div>
|
1
2
3
4
5
6
| new Vue({
el: "#root",
data: {
checked: true
}
})
|
3.2 多个checkbox组合使用，需要使用v-model绑定相同的数据，该数据为一个数组，当数组的值和checkbox的value值相同，才会被选中
1
2
3
4
5
6
7
8
9
| <div id="root">
<label for="html">HTML</label>
<input type="checkbox" v-model="checked1" value="html" id="html">
<label for="js">javascript</label>
<input type="checkbox" v-model="checked1" value="js" id="js">
<label for="css">css</label>
<input type="checkbox" v-model="checked1" value="css" id="css">
<p>输入的内容是： {{checked1}}</p>
</div>
|
1
2
3
4
5
6
| new Vue({
el: "#root",
data: {
checked1: ['js','css']
}
})
|
四、selected
selected也分单个选择和多项选择。
4.1 单个选择selected使用，需要通过v-model绑定selected值
1
2
3
4
5
6
7
8
9
| <div id="root">
<label>单个选择</label>
<select v-model="selected">
<option value="html">HTML</option>
<option value="js">JS</option>
<option value="css">CSS</option>
</select>
<p>目前状态是： {{selected}}</p>
</div>
|
1
2
3
4
5
6
| new Vue({
el: "#root",
data: {
selected: 'css',
}
})
|
4.2 多项选择selected使用，需要通过v-model绑定selected值，值为一个数组，当数组的值和selected的值匹配时，才会被选择
1
2
3
4
5
6
7
8
9
10
| <div id="root">
<label>多个选择</label>
<select v-model="selected1" multiple>
<option value="html">HTML</option>
<option value="js">JS</option>
<option value="css">CSS</option>
<option value="vue">VUE</option>
</select>
<p>目前状态是： {{selected1}}</p>
</div>
|
1
2
3
4
5
6
| new Vue({
el: "#root",
data: {
selected1: ['js','vue']
}
})
|
官方文档。