<!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. 防止Web表单重复提交的方法总结

    在Web开发中,对于处理表单重复提交是经常要面对的事情.那么,存在哪些场景会导致表单重复提交呢?表单重复提交会带来什么问题?有哪些方法可以避免表单重复提交? 表单重复提交的场景 1.场景一:服务端未能 ...

  2. Linux动态库生成与使用指南

    相关阅读: Linux静态库生成指南 Linux下动态库文件的文件名形如 libxxx.so,其中so是 Shared Object 的缩写,即可以共享的目标文件. 在链接动态库生成可执行文件时,并不 ...

  3. mysql 以数组的形式插入更新表

    在项目中用php+mysql,需要插入数据,但是数据库表字段又很长,如果用常规的insert into table (c) values ('dd')的话,将是很长的sql语句,而且一不小心,就弄错了 ...

  4. Coursera, Big Data 3, Integration and Processing (week 5)

    Week 5, Big Data Analytics using Spark     Programing in Spark   Spark Core: Programming in Spark us ...

  5. Log日志

    Log.e("tag", "错误信息");  Log.w("tag", "警告信息");  Log.i("ta ...

  6. codeforces 893F - Physical Education Lessons 动态开点线段树合并

    https://codeforces.com/contest/893/problem/F 题意: 给一个有根树, 多次查询,每次查询对于$x$i点的子树中,距离$x$小于等于$k$的所有点中权值最小的 ...

  7. Lua中的userdata

    [话从这里说起] 在我发表<Lua中的类型与值>这篇文章时,就有读者给我留言了,说:你应该好好总结一下Lua中的function和userdata类型.现在是时候总结了.对于functio ...

  8. PID控制器开发笔记之十二：模糊PID控制器的实现

    在现实控制中,被控系统并非是线性时不变的,往往需要动态调整PID的参数,而模糊控制正好能够满足这一需求,所以在接下来的这一节我们将讨论模糊PID控制器的相关问题.模糊PID控制器是将模糊算法与PID控 ...

  9. Selenium API常用方法

    driver.findElements()//定位一组List元素集合 driver.findElement()//定位一个元素 driver.getTitle()//获取页面标题 driver.ge ...

  10. Python Basic 01.Basic

    01.variable ''' 변수(variable) - 자료(data)를 임시(휘발성) 저장하는 역할 - 실제 자료가 아닌 자료의 주소를 저장한다.(참조변수) ''' # 1. 변수 ...