自定义多个checkbox点击查询数据方法

news/2024/7/10 0:45:36 标签: checkbox, vue

项目中存在多个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
    ...
}

http://www.niftyadmin.cn/n/555231.html

相关文章

js获取queryString(get方法)参数

思路 就是使用splitreduce组合&#xff0c;关于reduce方法&#xff0c;如果不熟&#xff0c;可以阅读我写的笔记。 《一文带你彻底搞懂js的Array.prototype.reduce()方法&#xff01;》 实现 function getQueryArray(url) {let query url.split("?").pop().spl…

同比和环比

百度上看了一堆&#xff0c;我始终不确定&#xff0c;昨天和前天对比&#xff0c;是同比还是环比 但是看到这个之后&#xff0c;我可以确定了&#xff0c;是环比 同比&#xff0c;就是跟去年同期比&#xff1b;环比&#xff0c;就是跟上一个周期比。例如&#xff0c;去年3月的价…

前端导出功能实现的三种方式

1.点击链接 数据、文件格式全部在后台封装好&#xff0c;返回给前端一个链接&#xff0c;前端通过点击链接自动下载&#xff0c;两种方式&#xff1a; &#xff08;1&#xff09;window.location.href ‘url’ &#xff08;2&#xff09;<a hrefurl download></a&g…

如何在vue3中优雅地使用v-model?

文章目录ps:vue3中推荐使用的是reactive写法&#xff0c;文中这种格式只是为了和vue2做对照&#xff0c;只是为了凸显vue3中对v-model的改进&#xff0c;仅供参考。Vue中的数据绑定v-bindv-bind支持的类型v-bind使用v-modelvue2中v-model用法不使用v-model的双向绑定父组件子组…

04_web基础(七)之jsp

39.jsp与el表达式引入 JSP:Java Server Pages:Java的服务网页(Java动态网页):Servlet的缺陷: 输出动态网页,超级麻烦! 没有体现责任分离思想(谁最擅长做什么,就应该做什么!)!实现动态网页:Servlet: Java代码(主) html片段(辅) --->动态网页.JSP: Java代码…

百度地图获取省市边界、设置图片背景

1.获取省市边界 &#xff08;1&#xff09;初始化地图 引入文件&#xff1a; <script type"text/javascript"src"http://api.map.baidu.com/api?v2.0&akW5mG5fGfiU73Yy2WmaWKzaKw"></script>初始化方法&#xff1a; // 初始化地图 in…

Js实现数组的指定位置的插入方法insert()

文章目录前言Array.prototype.splice()定义和用法语法返回值说明实现insert()插入函数前言 js的数组中没有插入方法&#xff0c;实现插入需要通过splice间接地实现。 Array.prototype.splice() 定义和用法 splice() 方法向/从数组中添加/删除项目&#xff0c;然后返回被删除…

WebApiThrottle限流框架使用手册

阅读目录&#xff1a; 介绍基于IP全局限流基于IP的端点限流基于IP和客户端key的端点限流IP和客户端key的白名单IP和客户端key自定义限制频率端点自定义限制频率关于被拒请求的计数器在web.config或app.config中定义限制策略获取API的客户端key存储限流的数据运行期间更新限制频…