<!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-09-22 distributions and square integrable functions)

    Suppose that $f\in L^2$, $g\in \scrD'$, if $$\bex f=g,\mbox{ in }\scrD', \eex$$ then $f=g\in L^2$. I ...

  2. C++ 实现简单命令行学生管理系统

    C++ 实现简单命令行学生管理系统 预览: 编译环境是macOS.system("clear") 在windows下请换成 system("cls") #inc ...

  3. react中键盘enter事件处理

    对于常见的搜索需求业务场景,用户输入完成后,点击enter事件请求数据,要求不提交页面,实现数据局部更新,这需要用到react中的表单Forms. 处理方法: (1)html书写 form标签中去掉a ...

  4. 【原创】大叔经验分享（18）hive2.0以后通过beeline执行sql没有进度信息

    一 问题 在hive1.2中使用hive或者beeline执行sql都有进度信息,但是升级到hive2.0以后,只有hive执行sql还有进度信息,beeline执行sql完全silence,在等待结 ...

  5. Number Sequence（周期是336！！不是48！！）

    1005 Number Sequence 时间限制: 1 Sec  内存限制: 60 MB 题目描述 A number sequence is defined as follows: f(1) = 1 ...

  6. [慢更]Sublime Text 快捷键及使用过的插件

    整理自己常用的sublime text命令和插件 1.pretty json Json 快速格式化,免去url访问json站点的烦恼. 摘自:https://segmentfault.com/a/11 ...

  7. thread - 传递引用参数

    当给 thread 的执行函数传递指针参数时,没有任何问题,但是如果想传递引用,按照普通函数的调用方法会遇到编译失败: #include <iostream> #include <t ...

  8. 禁用JavaScript之后，你的网站表现如何？

    一 最近要做一个新官网,需求评审完之后,考虑到官网都是纯静态页面,功能简单,操起vue-cli3几秒内创建好了项目脚手架,开发前,我打开了首页模板文件,看到下面这行字,有了一些思考-- <nos ...

  9. Windows API教程文件系统

    本篇文章主要介绍了"Windows API教程文件系统",主要涉及到Windows API教程文件系统方面的内容,对于Windows API教程文件系统感兴趣的同学可以参考一下. ...

  10. bzoj5397 circular 随机化(

    题目大意 给定一个环,环上有一些线段,试选出最多的线段 题解: 提醒:这可能是一篇非常欢乐的题解 我们考虑倍长环,然后断环为链 我们考虑枚举开头的线段,然后做一次贪心 这样子的复杂度根据实现的不同是\ ...