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. ...
随机推荐
- Linux block(1k) block(4k) 换算 gb
输入 df 显示1k blocks 大小 再输入 df -h 显示 gb换算大小 结论 block(1k) 计算公式为: block(1k) /1024/1000 = xx gb ...
- kubernetes 基础命令及操作
获取集群的基本信息kubectl cluster-infokubectl get nodeskubectl get namespaceskubectl get deployment --all-nam ...
- linux中$#,$0,$1,$2,$@,$*,$$,$?的含义
$# 是传给脚本的参数个数$0 是脚本本身的文件名$1 是脚本后接的第一个参数$2 是脚本后接的第二个参数$@ 是传给脚本的所有参数列表,"$1" "$2" & ...
- Manacher's Algorithm && 647. Palindromic Substrings 计算回文子串的算法
注:转载自:https://www.cnblogs.com/love-yh/p/7072161.html
- 英语考试 FZU - 2254 （最小生成树）
先选一个单词出来完全自己背,然后从这个单词到其他各个单词所需要的精力看成距离,然后用最小生成树把这些单词连接起来,就是通过我现在选的这个单词到其他各个单词的最小精力,然后再加上把这个单词背起来的精力, ...
- 跟angular2学一键开启项目--关于上个react-redux项目的一键调试
一键调试类似于webpack的hot-loader,但是这个hot-loader并不怎么好用,想省事的同学可以配置一下就完了. 今天介绍browser-sync,用它来一键开启项目.它可以监听任意文件 ...
- springcloud干货之服务注册与发现（Eureka）
springcloud系列文章的第一篇 springcloud服务注册与发现 使用Eureka实现服务治理 作用:实现服务治理(服务注册与发现) 简介: Spring Cloud Eureka是Spr ...
- Linux中OBS在Wayland环境下黑屏只显示鼠标的应对措施
本文写于2018-02-10.截至到此文完成时,没有已知的方法可以让OBS在Wayland环境下正常工作. 解决方法 放弃使用Wayland,改用X Window 在Wanyland上录制屏幕,可以使 ...
- 第三十六篇-FloatingActionButton的使用
效果图: 准备两张图片,一张作为桌面背景,一张作为那个悬浮的加号.放在mipmap下面. 首先,添加Imageview作为桌面背景,并设置扩充整个屏幕.接着,添加一个悬浮按钮,放在右下角,可以对悬浮按 ...
- Button中command后面函数添加参数解决方法
添加按钮,按钮的功效由command=函数名,后面的函数实现,但是如果直接写函数名,碰上那些需要参数的函数就会出错 因此,有个简单方法command=lambda:函数名(参数1,参数2.....) ...