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操作实现的. 今天没事就顺手写了一个,感觉很简单, ...
随机推荐
- 【Linux_Shell 脚本编程学习笔记六、shell的数值运算】
1.bc 命令的用法(可以整数也可以小数): bc是 UNIX下的计算器,它也可以用在命令行下面: 例: 给自变量 i 加 1 [root@docker Demo_test]# i= [root@do ...
- 使用 FreeMarker模板 Springboot 发送邮件
四.使用 FreeMarker模板 HTML 标签的字符串拼接是一件很棘手的事.因为在你的大脑中解析HTML标签并想象它在渲染时会是什么样子是挺困难的.而将HTML混合在Java代码中又会使得这个问题 ...
- Invalid action class configuration that references an unknown class问题原因之s:select
早先做个练习项目就出现了这个错误,各种查资料,然后各种尝试,依然没有解决,不过可以确定是前台页面导致的. 今天又碰到了这个问题,头疼啊!不能再略过了,使用最笨的方法,一个模块一个模块的排除.先看下我的 ...
- Java枚举的作用和用法
从没有枚举的时代说起 在枚举出现之前,如果想要表示一组特定的离散值,往往使用一些常量.例如: [Java] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 ...
- whip|resist|patch|intimate|
a piece of leather or rope that is fastened to a stick, used for hitting animals or people 鞭子,皮鞭 She ...
- 关于angular2跳路由防止页面刷新的做法（Angular2路由重载）
simpleReuseStrategy.ts // 创建重用策略 import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStr ...
- 吴裕雄--天生自然 神经网络人工智能项目：基于深度学习TENSORFLOW框架的图像分类与目标跟踪报告（续四）
2. 神经网络的搭建以及迁移学习的测试 7.项目总结 通过本次水果图片卷积池化全连接试验分类项目的实践,我对卷积.池化.全连接等相关的理论的理解更加全面和清晰了.试验主要采用python高级编程语言的 ...
- idea 内存溢出解决方法
在Run/Debug configuration 的 vm options里面输入 -server -XX:PermSize=128M -XX:MaxPermSize=256m 具体如下图:
- Dockfile自动创建discuz论坛和可道云
将discuz论坛的zip包解压之后用tar包压缩,这样ADD可以直接解压tar包. [root@localhost centos6.9_ssh_discuz]# pwd /opt/dockerfil ...
- python爬取许多图片的代码
from bs4 import BeautifulSoup import requests import os os.makedirs('./img/', exist_ok=True) URL = & ...