HTML代码:

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="app">
<p>
全选:
</p>
<input type="checkbox" id="checkbox" v-model="checked" @change="changeAllChecked()">
<label for="checkbox">
{{checked}}
</label>
<p>
多个复选框:
</p>
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
<label for="runoob">
Runoob
</label>
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
<label for="google">
Google
</label>
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
<label for="taobao">
taobao
</label>
<br>
<span>
选择的值为:{{checkedNames}}
</span>
</div>

Vue代码:

new Vue({
el: '#app',
data: {
checked: false,
checkedNames: [],
checkedArr: ["Runoob", "Taobao", "Google"]
},
methods: {
changeAllChecked: function() {
if (this.checked) {
this.checkedNames = this.checkedArr
} else { this.checkedNames = []
}
}
},
watch: {
"checkedNames": function() {
if (this.checkedNames.length == this.checkedArr.length) {
this.checked = true
} else {
this.checked = false
}
}
}
})

代码的引用的地址是:https://c.runoob.com/codedemo/3870 里面有效果

  这一段代码里面最难理解的就是为什么会全选上,这主要是因为checkedArr里面预先定义了有上面复选框里面的值,如果checked为true的时候,把checkedArr的值给了checkedNames了,然后上面复选框和CheckedNames是绑定的关系,当数据里面的值和上面复选框里面的value里面的值有一个相同的时候,自动就选中了。  如果不相信的话可以去改一下上面复选框里面的value的值,只要不是和下面数组里面的对应,就不会选中。

  下面的watch的作用就要是监听数据的:在这里用的是监听checkedNames的值改的时候和不和checked的长度相同。如果长度相同就说明全选了,

Vue全选和全不选的更多相关文章

  1. vue实现商品购物车全选与全不选项目实战

    项目需求: 实现一个购物车 全选框实现对商家和商品的全选 商家全选框实现对当前商家所有商品的全选 取消其中一个商品则取消对应商家全选和全选框 选中一个商家下的所有商品则勾选对应商家的全选框,不勾选全选 ...

  2. vue项目两级全选(多级原理也一样),感觉有点意思,随手一记

    需求: 首先说一下思路:我首先把数据列表两级遍历了一下,增加了一个checked属性来控制勾选和不勾线 this.productList.forEach((item)=>{ this.$set( ...

  3. VUE实现简单的全选/全不选

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. 第八十二篇:Vue购物车(三) 实现全选功能

    好家伙, 继续完善购物车相应功能 1.如何实现全选和反全选 1.1.全选框的状态显示(父传子) 来一波合理分析: 在页面中,有三个商品中 三个商品中的第二个未选择, 我么使用一个计算属性(fullSt ...

  5. vue实现功能 单选 取消单选 全选 取消全选

    vue实现功能 单选 取消单选 全选 取消全选 代码部分 <template> <div class=""> <h1>全选框</h1> ...

  6. vue实现单选多选反选全选全不选

    单选 当我们用v-for渲染一组数据的时候,我们可以带上index以便区分他们我们这里利用这个index来简单地实现单选 <li v-for="(item,index) in radi ...

  7. vue多级复杂列表展开/折叠,全选/分组全选实现

    首先,来看下效果图 在线体验地址:https://hxkj.vip/demo/multipleList/.温馨提示,打开之后按F12,使用手机模式食用,口味更佳! 可以看出,这个列表有三种展现形式: ...

  8. vue+vant-UI框架写的购物车的复选框全选和反选

    购物车页面的设计图 商品的列表 代码: <ul v-if="shoppingListData.rows.length"> <li v-for="(ite ...

  9. Vue 全选/取消全选,反选/取消反选

    这是一个组件: <template> <div> <div> <input type="checkbox" v-model="i ...

  10. js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中

    <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...

随机推荐

  1. 15-scrapy-redis两种形式分布式爬虫

    什么叫做分布式爬虫? 分布式爬虫,就是多台机器共用一个scrapy—redis程序高效爬取数据, 为啥要用分布式爬虫? 其一:因为多台机器上部署的scrapy会各自拥有各自的调度器,这样就使得多台机器 ...

  2. JAVA的基本语法1

    1.关键字 关键字的定义和特点 定义:被JAVA语言赋予了特殊含义,用作专门用途的字符串(单词). 就是在java语言编程的时候,在关键的地方使用的单词,体现关键的地方的含义.这些单词都是特有的,并且 ...

  3. Java技巧——将前端的对象数组通过Json字符串传到后端并转换为对象集合

    Java技巧——将前端的对象数组通过Json字符串传到后端并转换为对象集合 摘要:本文主要记录了如何将将前端的对象数组通过Json字符串传到后端,并在后端将Json字符串转换为对象集合. 前端代码 前 ...

  4. 合格的施工图是如何绘制的?必须要get这四点,大多数人都不知道

    对于工程设计师来说加班通宵赶图改图是常有的事情,如何绘制一套合格的施工图?这是很多工程设计师都会问的问题. 绘制一套合格的施工图,你需要注意以下四点: 一.明确施工图的作用和目的 1. 工程设计的细化 ...

  5. DOJO之gridx

    GridX简介 Gridx是IBM公司的职员对Dojo中的Grid进行进一步扩展的组件,但是它是重新开发了Grid而不是继承Grid. 虽然同样都是基于Dojo store, 但与DataGrid/E ...

  6. Python—文件读写操作

    初识文件操作 使用open()函数打开一个文件,获取到文件句柄,然后通过文件句柄就可以进行各种各样的操作了,根据打开文件的方式不同能够执行的操作也会有相应的差异. 打开文件的方式: r, w, a, ...

  7. [Go] gocron源码阅读-go语言web框架Macaron

    gocron源码中使用的是马卡龙框架,下面这个就是安装这个框架,和一般的MVC框架很像go get gopkg.in/macaron.v1git clone https://github.com/go ...

  8. [Php] windows下使用composer出现SHA384 is not supported by your openssl extension

    composer的版本太低了,需要更新composerwindows的安装使用https://getcomposer.org/Composer-Setup.exe报这个错Failed to decod ...

  9. Ubuntu18.04连接蓝牙耳机

    使用的耳机是索尼WI-SP500,打开设置,找到Bluetooth,直接连接(WI-SP500在连接第二台设备时,需要长按开机键7秒才行), 保证Output选择需要连接的耳机,然后确保Profile ...

  10. 04-align-content 它对于当单行是没有效果的

    /* 运用在父级元素上  align-content:   它通产与子元素的div{margin:10px 一起联合使用 }*/ ps==>用在子项出现换行的情况下,并是多行的情况下哦.运用在子 ...