vue实现简单全选和反选功能
作者：weixin_45803990 发布时间：2024-05-09 09:29:47
标签：Vue,全选,反选
本文实例为大家分享了vue实现简单全选和反选的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 700px;
text-align: center;
}
tr,
th {
height: 40px;
}
</style>
<script src="../vue.js"></script>
</head>
<body>
<div class="box">
<table cellspacing='0' border="solid 1px">
<thead>
<tr>
<th>全选<input type="checkbox" v-model='isAllChecked'></th>
<th>id</th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
</tr>
</thead>
<tbody>
<tr v-for='item in goods'>
<td><input type="checkbox" v-model='item.isCheck'></td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.num}}</td>
</tr>
</tbody>
</table>
</div>
<script>
var vm = new Vue({
el: '.box',
methods: {
},
data: {
goods: [
{
id: 20200905,
name: '苹果',
price: 3,
num: 12,
isCheck: false,
},
{
id: 20200905,
name: '香蕉',
price: 2,
num: 33,
isCheck: false,
},
{
id: 20200905,
name: '橘子',
price: 4,
num: 44,
isCheck: false,
},
]
},
computed: {
isAllChecked: {
/*
this.goods.every(el=>el.isCheck)返回结果为true 或者false
遍历下方每一个isCheck的状态、
1、 都选中返回true---------即全选为true,
2、 有一个没选中返回false---即全选为false
*/
get() {
return this.goods.every(el => el.isCheck)
},
set(val) {
// 全选的状态true、false两种状态
console.log(val);
// val为true即全选的时候、下方每一个isCheck也是true
// val为false即全选的时候、下方每一个isCheck也是false
return this.goods.forEach(el => el.isCheck = val);
}
}
}
})
</script>
</body>
</html>
来源：https://blog.csdn.net/weixin_45803990/article/details/108417565
0
投稿猜你喜欢
- 一、正则表达式 re模块是python独有的匹配字符串的模块，该模块中提供的很多功能是基于正则表达式实现的，而正则表达式是对字符串
- pydbclib是一个通用的python关系型数据库操作工具包，使用统一的接口操作各种关系型数据库（如 oracle、mysql、postg
- 自从jQuery搞出特性侦探这东东，西方从来没有如此狂热研究浏览器。在以前javascript与DOM遍地是bug，美工主宰前端的年代，人们
- 本文实例讲述了MySQL从命令行导入SQL脚本时出现中文乱码的解决方法。分享给大家供大家参考，具体如下：在图形界面管理工具 MySql Qu
我就废话不多说了，大家还是直接看代码吧~import numpy as np#从scipy库中导入插值需要的方法 interpolatefr- 上一次很多朋友写文字屏蔽说到要用正则表达，其实不是我不想用（我正则用得不是很多,看过我之前爬虫的都知道,我直接用BeautifulSoup的
- 1、将python打包好的exe解压为py文件，步骤如下： 下载pyinstxtractor.py文件2、下载地址：https://nchc
- 你是否想知道为什么事务日志文件会变得越来越大？事务日志有时候甚至会比你的实际数据库文件还要大，尤其是在应用数据仓库的情况下。为什么会发生这种
- Oracle公司6月9日宣布同意收购TimesTen公司，TimesTen是一家私营软件企业，其产品能提高用于股市和机票预订等需要快速响应时
- Oracle关系型数据库管理系统是世界上流行的关系数据库，它是一个极其强大、灵活和复杂的系统，据说，在使用oracle时应有这样的思想，那就
- (1) 展示了ASP * 站设计的一些最基本的方法，相信通过实践各位对ASP已经有了最基本的了解，本篇在答复大家所提问题的同时，将进一步介绍
- 导语九月初家里的熊孩子终于开始上学了！半个月过去了，小孩子每周都会带着一堆的数学作业回来，哈哈哈哈~真好，在家做作业就没时间打扰我写代码了。
- 当你第一次在机器上安装MySQL时，mysql数据库中的授权表是这样初始化的：你可以从本地主机（localhost）上以root连接而不指定
- 生成器就是自己用python代码写的迭代器，生成器的本质就是迭代器。通过以下两种方式构建一个生成器：1、通过生成器函数2、生成器表达式生成器
- 我的操作系统为centos6.51 首先选择django要使用什么数据库。django1.10默认数据库为sqlite3，本人想
- python3的多行输入问题因为在OJ上做编程，要求标准输入，特别是多行输入。特意查了资料，自己验证了可行性。if __name__ ==
- 一.概念简介 脚本:script是使用一种特定的描述性语言，依据一定的格式编写的可执行文件，又称作宏或批处理文件。 二.背景 近来在Wind
- 本文给出一条 SQL 语句用于展示在同一名服务器上，不同的数据库间查询，注意当前连接用户要对两个库都有权限SQL Server 中 SQL
- 在Vue项目中编写代码的时候经常会碰到这种烦人的无故报错，其实这是ESLint代码，如图下：解决办法：File>Settings>
- 自动化处理PDF文件使用Python完成简单的PDF文件处理操作，如PDF文件的批量合并、拆分、加密以及添加水印等。1. 批量合并PDF文件
