项目中存在多个checkbox,点击其中一项根据条件查询数据的时候,我们将查询条件定义成数组,根据点击传入的参数,向数组中添加或删除数组中元素生成新的查询条件。
1.页面结构
<div v-bind:class="{'active': choose1 }">
<input type="checkbox" value="1" v-model="choose1" @click="choose('条件1')"/>
<label>条件1</label>
</div>
<div v-bind:class="{'active': choose2 }">
<input type="checkbox" value="2" v-model="choose2" @click="choose('条件2')"/>
<label>条件2</label>
</div>
2.初始化data
data() {
return {
choose1: true,
choose2: true,
conditions: ['条件1', '条件2']
}
}
3.自定义方法
choose(c) {
let conditions = this.conditions;
if(c === '条件1' && this.choose1) {
this.choose1 = false;
// 去除数组中指定元素
let index = c.indexOf('条件1');
if (index > -1) {
c.splice(index, 1);
}
} else if (c === '条件1' && !this.choose1) {
this.choose1 = true
c.push('条件1');;
}
if(c === '条件2' && this.choose2) {
this.choose2 = false;
// 去除数组中指定元素
let index = c.indexOf('条件2');
if (index > -1) {
c.splice(index, 1);
}
} else if (c === '条件2' && !this.choose2) {
this.choose2 = true
c.push('条件1');;
}
let obj = {
c: c, // 存放筛选数据条件数组
ch: { // 存放勾选按钮状态的对象
ch1: this.choose1,
ch2: this.choose2
}
};
this.chooseAjax(obj);
}
chooseAjax(obj) {
// 改变checkbox按钮状态
this.choose1 = obj.ch.ch1;
this.choose2 = obj.ch.ch2;
// 根据条件发送ajax
...
}