<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="my">
 
<input type="checkbox" :checked="all" @click="changeAll()"/> 全选
<ul>
<li v-for="(v,i) in items">
<input type="checkbox" :checked="v.status" :index="i" @click="changeItems(i)"/> {{v.name}}
</li>
</ul>
</div>
<script>
let vm = new Vue({
el:"#my",
data:{
all:true,
items:[
{name:'手机',status:false},
{name:'电脑',status:false},
{name:'平板',status:true},
{name:'包包',status:false}
],
selectValue:[]
},
methods:{
changeAll(){
let self = this;
this.all = !this.all
this.items.forEach((val)=>{
val.status = self.all
})
},
changeItems(i){
this.items[i].status = !this.items[i].status;
let itemsStatus = this.items.every((val)=>{
return val.status
})
console.log(itemsStatus)
if(itemsStatus){
this.all = true
}else{
this.all = false
}
}
},
mounted(){
let itemsStatus = this.items.every((val)=>{
return val.status
})
console.log(itemsStatus)
if(itemsStatus){
this.all = true
}else{
this.all = false
}
}
 
})
</script>
</body>
</html>

vue全选与取消全选的更多相关文章

  1. 使用AngularJS实现简单:全选和取消全选功能

    这里用到AngularJS四大特性之二----双向数据绑定 注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器 效果: < ...

  2. jQuery --checkbox全选和取消全选简洁高效的解决办法

    最近在公司做了一个小项目,其中有一个全选和取消全选的这么一个模块,搞了半天找不到一种最佳的解决方案!后来通过各种努力找到了一种简洁高效的解决办法,这里想和大家分享一下.有问题的话,还望各路大神指导一二 ...

  3. bootstrap实现checkbox全选、取消全选

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 最新版本的 ...

  4. JS对checkbox全选和取消全选

    需求:checkbox控制列表数据全选与取消全选择. 效果图: 1.html <body > <input type="button" name="in ...

  5. react实现全选、取消全选和个别选择

    react里面实现全选和取消全选,个别选择等操作,效果如下 代码: import React, {Component} from 'react' export default class Demo e ...

  6. DataGridView添加一行数据、全选、取消全选、清空数据、删除选中行

    .net 2005下的Windows Form Application,一个DataGridView控件和4个Button,界面设置如下:         代码如下,有注解,相信大家都看得明白:   ...

  7. js实现checkbox组 全选和取消全选

    做后台管理程序时,用到一个checkbox组的全选和取消全选的功能, 主要是逻辑上的坑,理清后大概是: 1.全选点击后,小弟1~4都要选上,点击取消,小弟们也要取消 2.只要有一个小弟取消时,全选要取 ...

  8. js全选与取消全选

    实现全选与取消全选的效果 要求1(将军影响士兵):点击全选按钮,下面的复选框全部选中,取消全选按钮,下面的复选框全部取消 思路:复选框是否被选中,取决于check属性,将全选按钮的check属性值赋值 ...

  9. JS实现表单全选以及取消全选实例

    实现效果: 全选按钮:点击全选按钮所有的小按钮都会被选中:点掉全选按钮,所有按钮取消选中: 小按钮:只有全部被选中,全选按钮才会被选中 思路分析: 1.全选和取消全选做法:让下面所有复选框的 chec ...

  10. datagridview里面的checkbox全选和取消全选

    全选 设置全选button,选中所有的checkbox private void selectAll_Click(object sender, EventArgs e) { //遍历datagridv ...

随机推荐

  1. [再寄小读者之数学篇](2014-06-27 向量公式: The Hall term)

    $$\bex \n\cdot{\bf b}=0\ra \n\times [(\n\times {\bf b})\times {\bf b}]=\n\times [\n\cdot ({\bf b}\ot ...

  2. [再寄小读者之数学篇](2014-06-23 二阶导数估计 [中国科学技术大学2013年高等数学B 考研试题])

    设 $f(x)$ 二阶连续可导, $f(0)=f(1)=0$, $\dps{\max_{0\leq x\leq 1}f(x)=2}$. 证明: $$\bex \min_{0\leq x\leq 1}f ...

  3. 激活函数——tanh函数（理解）

    0 - 定义 $tanh$是双曲函数中的一个,$tanh()$为双曲正切.在数学中,双曲正切“$tanh$”是由基本双曲函数双曲正弦和双曲余弦推导而来. $$tanhx=\frac{sinhx}{co ...

  4. Java基础10-集合

    作业回顾 蜜蜂和熊的生产消费关系,熊在蜂蜜满10斤吃掉.蜜蜂一次生产一斤蜂蜜,且蜜蜂生成一斤蜂蜜花费的时间是10s. 十只蜜蜂和两只熊. 蜜蜂 bag: 20 每次产1,耗时10ms 满5的时候给蜜罐 ...

  5. 帆软报表（finereport） 动态报表

    动态表实现了不同的人根据需要选择不同的表进行查看,从而提高查询效率 在定义数据集时,通过if函数来判断参数的值从而来实现调用不同的数据表 如直接将SQL语句定义成:SELECT * FROM ${if ...

  6. <?xml version="1.0" encoding="UTF-8"?> 的作用

    version="1.0" 声明用的xml版本是1.0 encoding="UTF-8" 声明用xml传输数据的时候的字符编码,假如文档里面有中文,编码方式不是 ...

  7. 12、Grafan 4.3升级到Grafana 5.0

    Upgrading Grafana 升级Grafana We recommend everyone to upgrade Grafana often to stay up to date with t ...

  8. OpenSSL 提取 pfx 数字证书公钥与私钥

    由于之前生产环境已经使用了 Identityserver4 用来做授权与认证的服务,而新项目采用 Spring Cloud 微服务体系,一方面 Spring Cloud 官方暂时只支持 OAuth2. ...

  9. react 20180504

    react 入门 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  10. 纯css画直角三角形

    所有的三角形,都是通过盒子模型来设定. border(边框)的不同大小来决定 border-width: 边框的宽度 border-style: 边框的样式 border-color: 边框的颜色 1 ...