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. 详解JAVA8Stream API {全}

    1: 概述 1.1 优势 1.2 与传统迭代器的区分 1.3 流的操作类型分为两种: 2:流的构造与转换 2:1 常见构造 2.2: 三大包装类型的构造 2.3 并行流的规则输出 2.4 流的转换 3 ...

  2. HTML+css基础 标签

    图片标签:<img src="./imgs/1.jpg" alt=“一种对图片解释说明的” /> HTML   超文本标记语言   英文名称: hyper  text  ...

  3. linq根据两个时间求出天数

    对于在Linq To Entity里使用日期函数需要DbFunctions里的扩展方法,而不能使用.net里的日期函数,因为linq的代码会被翻译成SQL发到数据库端,如你的.net方法对于数据库是不 ...

  4. Springmvc配置定时任务注解开发

    1.添加命名空间和xsd约束 xmlns:task="http://www.springframework.org/schema/task" http://www.springfr ...

  5. Java开发桌面程序学习(12)——Javafx 悬浮窗提示 tooptip

    Javafx 悬浮窗提示 tooptip 鼠标悬浮在某个控件,弹出提示,效果如下: 代码: //control是某个控件 Tooltip.install(control, new Tooltip(&q ...

  6. .net core使用NLog日志

    前言:NLog日志对.net core web项目最新的支持在官网上有最新的介绍: 官网介绍地址:https://github.com/NLog/NLog/wiki/Getting-started-w ...

  7. wpf 当DataGrid列模版是ComboBox时,显示信息

    ​ 实际工作中,有时DataGrid控件某一列显示数据是从Enum集合里面选择出来的,那这时候设置列模版为ComboBox就能满足需求.而关于显示的实际内容,直接是Enum的string()返回值可能 ...

  8. excel 知识备忘

    public void UpdateShapesColor(string value) { foreach (Microsoft.Office.Interop.Excel.Shape chart in ...

  9. [译]Zookeeper的优点与局限性

    1.Zookeeper的优点与局限性 在学习了Zookeeper(后文都简称zk)的介绍和功能后,您已经很好地理解了zk. 现在,在这个zk教程中,我们将讨论zk的优点和局限性. zk有几个功能对用户 ...

  10. sftp-server 搭建编译

    下载开源代码 https://github.com/zwx230741/openssh-portable 编译 # autoconf # ./configure --prefix=xxx # make ...