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. ...
随机推荐
- MT【275】拉格朗日中值定理
已知$0<x_1<c<x_2<e^{\frac{3}{2}},$且$\dfrac{1-ln(c)}{c^2} = \dfrac{x_1ln(x_2)-x_2ln(x_1)}{x ...
- Android多种方法显示当前日期和时间
文章选自StackOverflow(简称:SOF)精选问答汇总系列文章之一,本系列文章将为读者分享国外最优质的精彩问与答,供读者学习和了解国外最新技术.本文探讨Android显示当前日期和时间的方法. ...
- Codeforces | CF1033D 【Divisors】
题目大意:给定\(n(1\leq n\leq500)\)个数\(a_1,a_2\cdots,a_n(1\leq a_i\leq2\cdot10^{18})\),每个数有\(3\sim5\)个因数,求\ ...
- 「SPOJ6340」「BZOJ1939」ZUMA - ZUMA【记忆化搜索】
题目链接 [洛谷传送门] 题解 \(f[i][j][k]\)表示在消除了\((i,j)\),在后面加上了\(k\)个珠子的总的珠子数. 考虑三种决策:(题目给出的\(k\)在下文表示成\(K\)) 决 ...
- Chinese Mahjong UVA - 11210 （DFS）
先记录下每一种麻将出现的次数,然后枚举每一种可能得到的麻将,对于这个新的麻将牌,去判断可不可能胡,如果可以胡,就可以把这张牌输出出来. 因为eye只能有一张,所以这个是最好枚举的,就枚举每张牌成为ey ...
- centos7/rhel7下安装redis4.0集群
相关介绍:Redis从3.0版本开始支持集群! 集群一般由多个节点组成,节点数量至少6个才能保证组成完整高可用的集群. 每个节点需要开启配置文件中的cluster-enabled yes,让Redis ...
- CodeFroces--Joseph’s Problem
题目意思:给出n k 求 k%1 + k%2 +k%3+...+k%n 的和 利用分块的思想 我们知道 k%i ==k-k/i*i 同时 一段连续的区间的 k/i 是相等的 #include< ...
- 如何设计出优秀的Restful API？
https://mp.weixin.qq.com/s?__biz=MzU0OTE4MzYzMw==&mid=2247485240&idx=1&sn=b5b9c8c41659d2 ...
- java 不定长参数
一,不定长参数的规定 一个方法只能有一个不定长参数,并且这个不定长参数必须是该方法的最后一个参数. 示例: public class VariArgs { public static void mai ...
- 关于 HDC 的释放
GetDC和ReleaseDC的调用配对,CreateDC和DeleteDC的调用配对. GetDC是从窗口获取现有的DC,而CreateDC是创建DC,所以ReleaseDC和DeleteDC的作用 ...