vue--基础应用 全选
1.用computed实现全选
<body>
<div id="app">
<input type="checkbox" v-model="checkAll">全选
<input type="checkbox" v-for="(item,index) in checks" :key="index" v-model="item.flag">
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
data:{
checks:[{flag:true},{flag:false},{flag:true}]
},
computed:{
checkAll:{
get(){
return this.checks.every(function(item){
return item.flag;
});
},
set(value){
this.checks.forEach(element => {
element.flag = value;
});
}
}
}
}).$mount("#app");
</script> </body>
vue--基础应用 全选的更多相关文章
- 用Vue实现一个全选指令
最近用vue做了两个项目,都需要实现全选反选的功能,两个项目用了两种实现方法,第一个项目用vue的computed,第二个项目用指令来实现,用起来,发觉指令更加方便. 第一次做全选的时候是刚开始接触v ...
- vue中实现全选功能
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue ...
- vue实现checked 全选功能
记录一下 module.data = { result: {}, items: [] //初始化全选按钮, 默认不选 ,isCheckedAll: false};module.vue = new V ...
- JavaScript基础6——全选示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue实现全选反选--简单使用
最近需要用到vue的反选全选功能,于是就在网上找了一些代码实现,发现都不能够完美的实现.于是乎决定自己写出一套.经过一翻努力,完美了进行了实现.bug也已经修复完毕,希望能够帮助到大家! < ...
- vue项目两级全选（多级原理也一样），感觉有点意思，随手一记
需求: 首先说一下思路:我首先把数据列表两级遍历了一下,增加了一个checked属性来控制勾选和不勾线 this.productList.forEach((item)=>{ this.$set( ...
- Vue.js实现checkbox的全选和反选
小颖之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.很感谢博客园的朋友帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. 1.html <te ...
- vue.js 批量删除跟全选，反选效果
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
- PHP基础班初学心得：用JQ实现表单的全选、反选、取消和删除功能
摘要: 本人刚参加PHP基础班培训,由于之前毫无基础,分享的心得可能不规范,方法也许也"旁门左道",不能保证质量,只作自己总结学习,也希望能帮助到同样是初学者的朋友们,共同进步. ...
- vue实现全选效果
vue实现全选效果 接触vue快半年了,记得刚用vue做项目的时候遇到一个全选功能,当时到处百度也没有找到怎么实现,最后还是用了jquery进行dom操作实现的. 今天没事就顺手写了一个,感觉很简单, ...
随机推荐
- isdigital()函数
函数说明: 主要用于检查其参数是否为十进制数字字符. 头文件: C——#include<ctype.h> C++——#include<cctype> 函数定义: int is ...
- maven命令-P 参数引发的思考
参考文档: https://blog.csdn.net/haiyuntai/article/details/53260191 谢谢原作者 maven 命令:clean package -Dmaven. ...
- [LC] 490. The Maze
There is a ball in a maze with empty spaces and walls. The ball can go through empty spaces by rolli ...
- 饿了么vue实现学习笔记
技术栈:vue2 + vuex + vue-router + webpack + ES6/7 + fetch + sass + flex + svg以功能实现着手学习1. 定位功能 home.vue ...
- Welcome to Erhan Blog
"Yeah It's on. " 前言 Erhan 的 Blog 就这么开通了. 跳过废话,直接看技术实现 2018 年,Hux 总算有个地方可以好好写点东西了. 作为一个程序员, ...
- 在 macOS 上试用 Gentoo/Prefix
前几天参加了许朋程主讲的Tunight,对Gentoo有了一定的了解,不过看到如此复杂的安装过程和长久的编译时间,又看看我的CPU,只能望而却步了.不过,有Gentoo/Prefix这个工具,使得我们 ...
- Canvas和svg总结比较
Canvas 基本用法 getContext() 描边和填充 strokeStyle:设置描边样式fillStyle:设置填充样式stroke():描边fill():填充 绘制矩形 fillRect( ...
- C与C++面试易出知识点
.1. char c = '\72'; 中的\72代表一个字符,72是八进制数,代表ASCII码字符":". 2. 10*a++ 中a先进行乘法运算再自增(笔试中经常喜欢出这类运算 ...
- Jstorm执行task报错windows CONFIG SET protected-mode no
windows CONFIG SET protected-mode no报错说redis受保护模式,redis使用的是Redis-x64-3.2.100,参考博文说是redis3.2之后加入的特性, ...
- 工作技术点小计14条 hybrid + animate 方向
设置transition 动画的时候 , js直接设置duration 和 变化值不会起作用 , 需要先设置duration , 等一小会再设置变化值 安卓端 , 窗口不可见时 , window.in ...