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= ...
随机推荐
- OpenCV3.4.1快速集成到Android studio中，10分钟搞定
OpenCV3.4.1快速集成到Android studio中,10分钟搞定 转载 https://blog.csdn.net/yu540135101/article/details/8259 ...
- CISCN 2019 writeup
划水做了两个pwn和两个逆向...... 二进制题目备份 Re easyGO Go语言,输入有Please字样,ida搜索sequence of bytes搜please的hex值找到字符串变量,交叉 ...
- 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_14-webpack研究-webpack-dev-server
实现自动打包自动刷新浏览器 新建目录和页面看图 cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30 ...
- Linux下如何安装Nginx
看这就够了 https://segmentfault.com/a/1190000012435644 注意如果是远程浏览器访问是否启动了nginx,出现无法访问 服务器能够启动.访问不了页面 很大可能是 ...
- 一百三十一：CMS系统之轮播图上传图片功能
将七牛js放到common下 把获取uptoken的接口放到common视图中 把初始化七牛放到banners.js中 //初始化七牛$(function () { qiniujs.setUp({ ' ...
- wangEditor编辑器控件里textarea的id不要用content
头引用 <script type="text/javascript" src="js/jquery-1.10.2.min.js"></scri ...
- JAVA 基础编程练习题19 【程序 19 打印菱形图案】
19 [程序 19 打印菱形图案] 题目:打印出如下图案(菱形) * *** ************ ***** *** * 程序分析:先把图形分成两部分来看待,前四行一个 ...
- 【ML】seq2seq原理
最近要做分享,重温seq2seq原理,这篇文章讲的挺清楚: https://zhuanlan.zhihu.com/p/40920384 https://www.jianshu.com/p/b2b95f ...
- IOS-App 运行installation failed原因及解决方法
解决方法如下: Bundle Identifier不能为空
- Flutter参数的传递和接收
上次只写了方法和参数,这次写了完整的示例,页面间参数的传递和接收的示例. 1.参数传递 用在程序上解释就是比如你进入一个商品选择列表,当你想选择一个商品的具体信息的时候,你就要传递商品编号,详细页面接 ...