VUE实现简单的全选/全不选
<!DOCTYPE html>
<html> <head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
} th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
height: 24px;
} td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
</style>
</head> <body>
<table id='app'>
<tr>
<th>
<input type="checkbox" name="" id="checkAll" @click='fn' />全选/全不选
</th>
<th>菜名</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input :checked='msg' type="checkbox" name="check" class="ck" />
</td>
<td>红烧肉</td>
<td>隆江猪脚饭</td>
<td>￥200</td>
</tr>
<tr>
<td>
<input :checked='msg' type="checkbox" name="check" class="ck" />
</td>
<td>香酥排骨</td>
<td>隆江猪脚饭</td>
<td>￥998</td>
</tr>
<tr>
<td>
<input :checked='msg' type="checkbox" name="check" class="ck" />
</td>
<td>北京烤鸭</td>
<td>隆江猪脚饭</td>
<td>￥88</td>
</tr>
</table>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
// 先让checked默认为false
msg: false,
},
methods: {
// 点击事件做判断
fn() {
// 如果为值为false 那就让他编程true
// 如果为值为true 那就让他编程false
if (this.msg == true) {
this.msg = false;
} else {
this.msg = true;
}
}
}
})
</script> </html> <!-- 有bug联系我 -->
vue实现简单的全选/全不选效果
VUE实现简单的全选/全不选的更多相关文章
- vue 入门 ------简单购物车功能实现(全选，数量加减，价格加减）
简易购物车功能(无任何布局 主要是功能) 数量的加减 商品的总价钱 全选与全不选 删除(全选.价格 受影响) <script src="https://cdn.jsdelivr.net ...
- vue实现功能 单选 取消单选 全选 取消全选
vue实现功能 单选 取消单选 全选 取消全选 代码部分 <template> <div class=""> <h1>全选框</h1> ...
- vue+vant-UI框架写的购物车的复选框全选和反选
购物车页面的设计图 商品的列表 代码: <ul v-if="shoppingListData.rows.length"> <li v-for="(ite ...
- Dynamic CRM 2013学习笔记（二十六）报表设计：Reporting Service报表 动态参数、参数多选全选、动态列、动态显示行字体颜色
上次介绍过CRM里开始报表的一些注意事项:Dynamic CRM 2013学习笔记(十五)报表入门.开发工具及注意事项,本文继续介绍报表里的一些动态效果:动态显示参数,参数是从数据库里查询出来的:参数 ...
- 利用jQuery实现CheckBox全选/全不选/反选
转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...
- Jquery 遍历 Table；遍历CheckBox ；遍历Select；全选/全不选
关于Jquery:相信大家已经很熟悉了,我最近的项目运用到关于Jquery的遍历事件:权当总结下: 遍历Table <table id="thistab"> < ...
- Java 多选框的全选、多选、反选（JQuery 实现）
jQuery 实现全选.多选.反选 学习内容: 需求 总结: 学习内容: 需求 jQuery 实现全选.多选.反选 实现代码 <!DOCTYPE html> <html lang=& ...
- 在jquery中，全选/全不选的表示方法
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- JS checkbox 全选 全不选
/* JS checkbox 全选 全不选 Html中checkbox: <input type="checkbox" name="cbx" value= ...
随机推荐
- Java同步数据结构之DelayQueue/DelayedWorkQueue
前言 前面介绍了优先级队列PriorityBlockingQueue,顺带也说了一下PriorityQueue,两者的实现方式是一模一样的,都是采用基于数组的平衡二叉堆实现,不论入队的顺序怎么样,ta ...
- 用jeecg做个项目第三讲(自定义导入导出)
1.导入 前端js和跳转页面 <t:dgToolBar title="导入单一模板" icon="icon-put" funname="Impo ...
- DriverManager
1: 注册驱动 Class.forName("com.mysql.jdbc.Driver") ; static { try { java.sql.DriverManager.reg ...
- jmeter-显示log的方法，和脚本通用的语法
beanshell log日志设置.log日志输出 步骤: 1.从选项-勾选Log Viewer,打开调试窗口 2.选择显示log的等级 3.在脚本中加入要打引的log 如: log.info(‘日 ...
- 【ASP.NET Core学习】远程过程调用 - gRPC使用
本文介绍在gRPC使用,将从下面几个方面介绍 什么是RPC 什么时候需要RPC 如何使用gRPC 什么是RPC RPC是Remote Procedure Call简称,翻译过来是远程过程调用.它是一个 ...
- Spring Boot项目中MyBatis连接DB2和MySQL数据库返回结果中一些字符消失——debug笔记
写这篇记录的原因是因为我之前在Spring Boot项目中通过MyBatis连接DB2返回的结果中存在一些字段, 这些字段的元素中缺少了一些符号,所以我现在通过在自己的电脑上通过MyBatis连接DB ...
- Thinking - 一些有效阅读的方法
有策略,忌盲目.讲方法,别蛮干! 1- 阅读方法 1.1 做好眼前事 排除其他事项干扰,营造适合阅读的状态和环境,专注地投入阅读之中. 如果被一堆乱糟糟的事情烦扰,身心处于一个疲惫的状态,必然无法保持 ...
- sonar汉化
- 【ABAP系列】SAP ABAP 字符编码与解码、Unicode
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP 字符编码与解码 ...
- QFramework 使用指南 2020 （四）：脚本生成（2）ViewController 与 ViewController 嵌套绑定
在上一篇,我们学习了,脚本生成的基本使用. 在这一篇,我们试着深入,聊聊脚本生成给我们带来的便利. 脚本生成的便利 首先,我们要知道,在 Unity 的游戏世界中都是以 GameObject 为单位的 ...