vue实现全选,反选
1.example.vue
<template>
<table class="table-common">
<tr>
<th class="th1"><label for="selectAll"><input type="checkbox" v-model='checkAll' @click='checkedAll()' name="" id="selectAll" value="" />全选</label></th>
<th class="th2">维度名称</th>
<th class="th3">维度说明</th>
</tr>
<tr v-for="item in checkData">
<td ><input type="checkbox" name="" value="" v-model='item.isCheck' @change="singleSelect()"/></td>
<td class="right">item.text</td>
</tr>
</table> </template>
<script>
export default {
name: 'design',
data() {
return{
checkAll:false,
checkData:[
{text:'haha',isCheck:false},
{text:'hehe',isCheck:false},
{text:'xixi',isCheck:false}
]
}
},
methods:{
//全选
checkedAll() {
for(var item=0;item<=this.checkData.length;item++){
this.checkData[item].isCheck = !this.checkAll;
}
},
//单选
singleSelect(){
var selectData=this.checkData.filter(function(item){
return item.isCheck==true;
})
selectData.length==this.checkData.length? this.checkAll=true:this.checkAll=false;
}, }
}
</script>
vue实现全选,反选的更多相关文章
- vue实现全选反选--简单使用
最近需要用到vue的反选全选功能,于是就在网上找了一些代码实现,发现都不能够完美的实现.于是乎决定自己写出一套.经过一翻努力,完美了进行了实现.bug也已经修复完毕,希望能够帮助到大家! < ...
- JavaScript、全选反选-课堂笔记
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于input全选反选恶心的异常情况
上一篇讲到:第一次点击全选按钮input显示对勾,第二次则不显示,需要用prop来添加checked属性. 但是用prop会出现一个问题,对勾显示,而checked属性不会被添加(比如:$(" ...
- jQuery全选/反选checkbox
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- python: jquery实现全选 反选 取消
引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...
- BootStrapt iCheck表单美化插件使用方法详解(含参数、事件等) 全选 反选
特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备 2.支持触摸设备 — iOS.Android.BlackBerry.Windows Phone等系统 4.方便 ...
- 用javascript实现全选/反选组件
以下是本人制作的全选/反选 组件,供广大同行参考.指正: 效果如图: 在实现的过程中,全选和全部取消选中这两个功能较为简单,只需用for循环遍历所有复选框为true或false即可.反选也较为简单,也 ...
- jquery、js操作checkbox全选反选
全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...
- jquery、js全选反选checkbox
操作checkbox,全选反选 //全选 function checkAll() { $('input[name="TheID"]').attr("checked&quo ...
- Dom操作--全选反选
我们经常会在网站上遇到一些多选的情况,下面我就来说说使用Dom写全选反选的思路. 全选思路:首先,我们来分析一下知道,当我们点击"全选"复选框的时候,所有的复选框应该都被选中,那我 ...
随机推荐
- 散列--P1047 校门外的树
题目描述 某校大门外长度为L的马路上有一排树,每两棵相邻的树之间的间隔都是1米.我们可以把马路看成一个数轴,马路的一端在数轴0的位置,另一端在L的位置:数轴上的每个整数点,即0,1,2,-,L,都种有 ...
- enote笔记语言(3)(ver0.4)
章节:enote笔记语言(3) what&why(why not)&how&when&where&which:紫色,象征着神秘而又潜蕴着强大的力量,故取 ...
- P1048 采药
题目描述 辰辰是个天资聪颖的孩子,他的梦想是成为世界上最伟大的医师.为此,他想拜附近最有威望的医师为师.医师为了判断他的资质,给他出了一个难题.医师把他带到一个到处都是草药的山洞里对他说:“孩子,这个 ...
- 透彻分析C/C++中memset函数
在C语言中,经常需要对内存进行操作,里面涉及很多函数,但是memset函数的使用有一点需要大家格外注意,这也是我在做项目时遇到过的一个问题,调试了很久才找出来错误. 函数原型是:void *memse ...
- Django ContentType内置组件
一.引出问题 假如有这两张表,它们中的课程可能价格不一样.周期不一样.等等...不一样...,现在有一张价格策略表,怎么就用一张表报保存它们之间不同的数据呢? 可能你会这样: 确实是行!但是,如果有很 ...
- 如何用纯 CSS 创作一个按钮文字滑动特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 在线预览 https://codepen.io/zhang-ou/pen/GdpPLE 可交互视频教 ...
- Python爬虫入门教程第七讲: 蜂鸟网图片爬取之二
蜂鸟网图片--简介 今天玩点新鲜的,使用一个新库 aiohttp ,利用它提高咱爬虫的爬取速度. 安装模块常规套路 pip install aiohttp 运行之后等待,安装完毕,想要深造,那么官方文 ...
- vue中的跨域
proxyTable: { '/zabbix_api': { target: 'http://10.88.22.8',//设置你调用的接口域名和端口号 别忘了加http changeOrigin: t ...
- 移动端禁止滑动的js处理方式
下面是禁止移动端滑动事件的方式,慎用 document.querySelector('body').addEventListener('touchmove', function (ev) { ...
- 洛谷 1091 合唱队形(NOIp2004提高组)
[题解] 分别做一遍最长上升序列和最长下降序列,再枚举峰的位置计算答案即可. #include<cstdio> #include<algorithm> #include< ...