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操作实现的. 今天没事就顺手写了一个,感觉很简单, ...
随机推荐
- hadoop创建两大错误：Bad connection to FS. command aborted. exception和Shutting down NameNode at hadoop
1.问题目录表: Error代码 failed on connection exception: java.net.ConnectException: Connection refused 3. ...
- Ajax 请求参数过多导致 400 错误 and BCryptPasswordEncoder 加密判断
2019/06/19 先分享一种密码加密方式: Spring Security 提供了 BCryptPasswordEncoder类, 实现Spring的PasswordEncoder接口使用BCry ...
- fiddler模拟返回响应数据
通过find查找修改指定内容 选择find a file 保存后重新发起请求
- 为何印度打车软件Ola，也难逃“资本合并”命运？
从全球市场来看,共享经济已经引发了多场具有颠覆性的风暴.尤其是在与大众关系紧密的衣食住行方面,诞生了具有强势影响力的独角兽企业.如,共享打车企业Uber.共享房屋出租企业Airbnb等.而鉴于每个国家 ...
- 使用apktool反编译apk文件
Apktool https://ibotpeaches.github.io/Apktool/install/ 下载地址:Apktool https://bitbucket.org/iBotPeache ...
- 安装python3.5
安装python3.5可能使用的依赖 [root@heweiwei heweiwei]# yum install openssl-devel bzip2-devel expat-devel gdbm- ...
- LeetCode Problem 90. Subsets II
python solution 123456789101112131415161718192021222324252627 class (object): def subsetsWithDup(sel ...
- MySQL安装和常用命令
一.安装MySQL groupadd mysqluseradd -r -g mysql mysqlgroups mysqlfind / -name mysql | xargs rm -rfwget h ...
- C2C的道德边界：沦为从假运单到假病条的供假渠道
你可能刚开始学会不去看网购平台上商品回评中的虚假好评,却又要开始应对同事在朋友圈等平台买来的虚开病假条带来的困扰.最近各大媒体包括党报热传的网购病假条事件,再度将人们的目光集中在这个C2C模式之上.从 ...
- 软工 实验一 Git代码版本管理
实验目的: 1)了解分布式版本控制系统的核心机理: 2) 熟练掌握git的基本指令和分支管理指令: 实验内容: 1)安装git 2)初始配置git ,git init git status指令 3 ...