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写全选反选的思路. 全选思路:首先,我们来分析一下知道,当我们点击"全选"复选框的时候,所有的复选框应该都被选中,那我 ...
随机推荐
- 无插件纯Web HTML5 3D机房 进阶篇(新增设备、线缆、巡查等功能)
前情提要 前阵子写了一篇无插件纯Web 3D机房,介绍了如何用html5在网页上创建无插件的精美3d机房场景.这两个月以来,陆续收到很多朋友的鼓(膝)励(盖),受宠若惊之余,对索要源代码的朋友都已经尽 ...
- 参考KOA,5步手写一款粗糙的web框架
我经常在网上看到类似于KOA VS express的文章,大家都在讨论哪一个好,哪一个更好.作为小白,我真心看不出他两who更胜一筹.我只知道,我只会跟着官方文档的start做一个DEMO,然后我就会 ...
- vticker.js--垂直滚动插件
一.使用要求 列表必须是ul>li的格式 html代码 <div class=" myvticker'"> <ul> <li>1.新闻标题 ...
- 将登录代码模块化,然后用add address接口来调用它,success!
登录模块,单独写成mylogin()方法,保存为modeltry119.py,然后接口的文件只写接口, 在post请求时,引用mylogin()返回的cookies就好了. requests.post ...
- vue-cli中src/main.js 的作用
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been ...
- 【Codeforces 922D】Robot Vacuum Cleaner
[链接] 我是链接,点我呀:) [题意] 让你把n个字符串重新排序,然后按顺序连接在一起 使得这个组成的字符串的"sh"子序列最多 [题解] /* * 假设A的情况好于B * 也就 ...
- RNN and Language modeling in TensorFlow
RNNs and Language modeling in TensorFlow From feed-forward to Recurrent Neural Networks (RNNs) In th ...
- node.js 利用流实现读写同步,边读边写
//10个数 10个字节,每次读4b,写1b let fs=require("fs"); function pipe(source,target) { //先创建可读流,再创建可写 ...
- 关于使用freemarker导出word
java使用FreeMarker导出word 一. 先做一个word模板 二. 将该word文件另存为xml格式(注意是另存为,不是直接改扩展名) 三. 打开xml文件把要 ...
- Javascript: 动态显示进度条
{% if not config.exec_id == '' %} <br /> <div class="progress"> <div class= ...