1.关于v-model
v-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据。
v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。
2.v-model 在不同的元素使用不同的 property 并抛出不同的事件
text 和 textarea 元素使用 value property 和 input 事件;
checkbox 和 radio 使用 checked property 和 change 事件;
select 字段将 value 作为 prop 并将 change 作为事件。
3.文本
v-model绑定的是data里的message属性↓
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
4.多行文本域
<textarea v-model="message" placeholder="add multiple lines"></textarea>
5.单选按钮
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
tip:1.label for的值和id值相等,才会有匹配效果
2.单选按钮的v-model绑定空字符串
3.当v-model与value相等,就会选中
data: {picked: ''}
6.单个复选框
绑定v-model到布尔值,ture为选中,false为不选中
<input type="checkbox" id="checkbox" v-model="checked">
data: {checked:false}
7.多个复选框
绑定v-model必须为数组,否则点击单一checkbox,都会全部选中
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
data: {checkedNames: []}
若要选中单个或多个checkbox,只要v-model绑定数组中有此value即可
8.select选择框
绑定v-model为空字符串,选中option会自动加到空字符串中(ABC)
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
data: {selected: ''}
9.vue全选和反全选demo
HTML部分
<input type="checkbox" id="checkbox" v-model="checked" @click='checkAll()'>
<label for="checkbox">全选</label>
<label :for="item.id" v-for='(item,i) in list '>
<input type="checkbox" :id='item.id' :value='item' v-model='arr'>{{item.value}}
</label>
JS部分
new Vue({
el: '#app',
watch: {
arr: {
handler: function (val, oldVal) {
if (this.arr.length == this.list.length) {
this.checked = true;}
else {this.checked = false;}},
deep: true}},
data() {
return {
checked: false,
list: [{
id: '1',
value: '苹果'
}, {
id: '2',
value: '荔枝'
}, {
id: '3',
value: '香蕉'
}],
arr: []
}},
methods: {
checkAll() {
// 点下去之前是true还是false
if (this.checked) this.arr = []
else {
this.arr = [],
this.list.forEach(r => {
this.arr.push(r)
})}}},})
思路:1.全选按钮为单个checkbox,v-model绑定data的checked值,为true选中
2.点击全选按钮,添加click事件,判断此时checked的值,若为选中true,
将子checkbox的v-model绑定的arr数组添加v-for的list数组,这样子类checkbox全部选中,false将arr数组置为空即可
3.当点击单个子类checkbox时,会自动将value值加入arr。所以用深度watch监听arr.length和list.length,相等后将checked值变成true
4.tip:此demo不适合监听checked的值,如果设置watch checked再push后,当点选子类checkbox后,checked会变成true,会再次push整个list。