vue实现简单的全选、反选、不选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
喜欢的城市
<hr>
<div v-for="item in arr">
{{item.city}}
<input type="checkbox" value="" v-model="item.checked">
</div>
<br />
<button @click="checkall">全选</button>
<button @click="inverse">反选</button>
<button @click="uncheckall">全不选</button>
</div>
<script>
/* *** v-model中只能传数据变量 不能写成v-model = "true"、v-model = "{b:true}" 报错 只能用数据
v-model = "数据" ***在v-for中如果要循环数组，还要使用v-model,
那么model中的值，应该传成arr[key],在改变数据的时候
使用赋值的方式更改数据。 如果是对象，不能使用赋值的方式更改数据。
*/
new Vue({
el:'#app',
data:()=>{
return {
arr:[
{city:'巴黎',checked:false},
{city:'悉尼',checked:true},
{city:'纽约',checked:false},
{city:'伦敦',checked:false},
{city:'柏林',checked:false}
]
}
},
methods:{
checkall(){
this.arr.forEach(item=>{
item.checked = true;
})
},
inverse(){
this.arr.forEach(item=>{
item.checked = !item.checked;
})
},
uncheckall(){
this.arr.forEach(item=>{
item.checked = false;
})
}
} });
</script>
</body>
</html>
vue实现简单的全选、反选、不选的更多相关文章
- VUE实现简单的全选/全不选
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- JQ实现复选框的全选反选不选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- wpf--------------datagrid全选反选 多选进行删除操作 前后台
前台绑定 <DataGrid.Columns> <DataGridTemplateColumn > <DataGridTemplateColumn.HeaderTempl ...
- Android开发 ---基本UI组件5：监听下拉选项，动态绑定下拉选项、全选/反选，取多选按钮的值，长按事件，长按删除，适配器的使用，提示查询数据，activity控制多按钮
效果图: 效果描述: 1.当点击 1 按钮后,进入选择城市的页面,会监听到你选中的城市名称:动态为Spinner绑定数据 2.当点击 2 按钮后,进入自动查询数据页面,只要输入首字母,就会动态查找以该 ...
- JQuery 全选 反选 获取Table 中指定td的元素值
//全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...
- 简单JS全选、反选代码
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...
- vue+vant-UI框架写的购物车的复选框全选和反选
购物车页面的设计图 商品的列表 代码: <ul v-if="shoppingListData.rows.length"> <li v-for="(ite ...
- 用javascript实现全选/反选组件
以下是本人制作的全选/反选 组件,供广大同行参考.指正: 效果如图: 在实现的过程中,全选和全部取消选中这两个功能较为简单,只需用for循环遍历所有复选框为true或false即可.反选也较为简单,也 ...
- 利用jQuery实现CheckBox全选/全不选/反选
转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...
随机推荐
- Hdoj 2289.Cup 题解
Problem Description The WHU ACM Team has a big cup, with which every member drinks water. Now, we kn ...
- 自学Aruba集锦
自学Aruba集锦 01 自学Aruba之功率单位和相对单位 02 自学Aruba之无线频段---ISM频段及UNII频段 03 自学Aruba之2.4GHz及5GHz无线信道 04 自学Aruba之 ...
- 自学华为IoT物联网_05 能源工业物联网常见问题及解决方案
点击返回自学华为IoT物流网 自学华为IoT物联网_05 能源工业物联网常见问题及解决方案 1. 1 能源工业--油田业务面临的三大挑战 故障处理不及时: 部分油田开采难道大.机械故障较多.现场发生的 ...
- PHP安装－phpMyAdmin+Discuz
PHP安装-phpMyAdmin+Discuz基于Apache和MySQL安装完成之后继续安装PHP.以构建LAMP动态网站平台.http:./configure --prefix=/usr/loca ...
- 不是说记住rm -rf的教训就够了
不是说记住rm -rf的教训就够了 李阿玲· 12 天前 2013年,我在同步CTAN镜像的时候,在/home下我的文件夹里面操作了下面的命令: rsync -av --delete rsync:// ...
- QBXT Day2主要是数据结构（没写完先占坑）
简单数据结构 本节课可能用到的一些复杂度: O(log n). 1/1+1/1/.....1/N+O(n log n) 在我们初学OI的时候,总会遇到这么一道题. 给出N次操作,每次加入一个数,或者询 ...
- 解决VS2012 服务器资源管理器中的表拖不到Linq to sql中
找到C:\Program Files (x86)\Common Files\microsoft shared\Visual Database Tools\dsref80.dll 这个dll文件: 在其 ...
- C# Winform ListView控件
一.ListView: 1.视图改为为Detalis: 2.编辑列,每添加一个添加一列,右侧属性Text改列名,停靠位置,列头的长度等等: 3.右侧属性,点开Iteme,添加ListViewItem集 ...
- 【CH6801】棋盘覆盖
题目大意:给定一个 N*N 的棋盘,棋盘上有些位置不能防止任何东西,现用 1*2 的骨牌填充棋盘,问最多能铺多少块骨牌. 题解:由于骨牌只能覆盖相邻的两个格子,那么按照对角线进行划分的格子可以保证一定 ...
- （五）Oracle 的 oracle 表查询
http://www.hechaku.com/Oracle/oracle_tables_chack.html 通过scott用户下的表来演示如何使用select语句,接下来对emp.dept.salg ...