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操作实现的. 今天没事就顺手写了一个,感觉很简单, ...
随机推荐
- POJ-1811-Prime Test（pollard_rho模板，快速找最小素因子）
题目传送门 sol:Pollard_Rho的模板题,刚看了Pollard_Rho和Miller_Rabin很多原理性的东西看不懂,只是记住了结论勉强能敲代码. Pollard_Rho #include ...
- [LC] 45. Jump Game II
Given an array of non-negative integers, you are initially positioned at the first index of the arra ...
- resume|issue|transmit|sake|obliged|beyond her wildest dreams|echo|transmission|immense|consistent |convey to| boasted|satisfaction|rub|enrol|demonize
If an activity resumes, or if you resume it, it startsagain after a pause. (中断后)继续,重新开始 Normal servi ...
- IOC初始化销毁的2种实现方式
IOC初始化销毁的2种实现方式 1.bean内调用init-method 和destroy-method 2.通过注解实现@PostConstruct 和@PreDestroy ----------- ...
- LINQ之路 7：子查询、创建策略和数据转换（要点笔记）
匿名类型 上面我们自己定义了类型TempProjectionItem来存放查询的结果.通过使用匿名类型,我们可以省去这种中间类型的定义,而由编译器来帮我们完成: select item.Origina ...
- <JZOJ1329>旅行
贪心大水题 #include<cstdio> #include<iostream> #include<cstring> #include<algorithm& ...
- 吴裕雄--天生自然 R语言开发学习：基本图形（续一）
#---------------------------------------------------------------# # R in Action (2nd ed): Chapter 6 ...
- 吴裕雄--天生自然KITTEN编程：小鼠数学题
- js数组中重复的对象去重
var arr = [{ "name": "ZYTX", "age": "Y13xG_4wQnOWK1QwJLgg11d0pS4h ...
- TesterHome创始人思寒：如何从手工测试进阶自动化测试？十余年经验分享
做测试十多年,有不少人问过我下面问题: 现在的手工测试真的不行了吗? 测试工程师,三年多快四年的经验,入门自动化测试需要多久? 自学自动化测试到底需要学哪些东西? 不得不说,随着行业的竞争加剧,互 ...