很简单的使用vue实现全选和取消全选

直接上代码，简单易懂不懂得可以留言。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head><body><div id="app"><div v-for="list,index in lists"><label :for="index">{{list.name}}<input :id="index" type="checkbox" :value="list.name" v-model="checkboxArr"> //这里注意list.name这个值一定要和checkAll函数中绑定的红色的值要一样</label></div><label><input type="checkbox" class="checkbox" @click="selectAll" />{{checkAllAddTxt}}</label></div><script src="vue.js"></script><script>window.onload = function () {var c = new Vue({el: '#app',data: {checkboxArr: [],lists: [{ // lists是从接口拿到的要遍历带有checkbox的数据'name': '111'}, {'name': '222'}, {'name': '333'}, {'name': '444'}],checkAllAddTxt: '全选' // 作为全选 取消全选的显示文字
                },methods: {selectAll: function (event) {var _this = this;if (!event.currentTarget.checked) {this.checkboxArr = []; // 取消全选this.checkAllAddTxt = '全选';} else { // 实现全选_this.checkboxArr = [];_this.lists.forEach(function (list, i) {_this.checkboxArr.push(list.name);});this.checkAllAddTxt = '取消全选';}}}});};</script>
</body></html>

转载于:https://www.cnblogs.com/lm-it/p/8467400.html

vue全选和取消全选（无bug）相关推荐

react实现全选、取消全选和个别选择
react里面实现全选和取消全选,个别选择等操作,效果如下代码: import React, {Component} from 'react' export default class Demo e ...
在项目中学习.NET的JQuery CheckBox方法(全选、取消全选、其他）
一.在项目中遇到的CheckBox的全选和取消全选以及其他等解决方案如下: // 对全选和取消全选的事件 $("#CheckAll").click(function () { ...
axure实现复选框全选_AxureRP8实战手册-案例73（全选与取消全选效果）
案例73. 全选与取消全选效果案例来源: 百度音乐-音乐盒案例效果: 初始状态/取消全选时:(图5-117) 全选后取消任一选项时:(图5-118) 全选/单选全部选中时:(图5-119) 案例描 ...
DataGridView添加一行数据、全选、取消全选、清空数据、删除选中行
.net 2005下的Windows Form Application,一个DataGridView控件和4个Button,界面设置如下: 代码如下,有注解,相信大家都看得明白: using Syst ...
php 复选框全选和取消,基于JavaScript实现复选框的全选和取消全选
这篇文章主要为大家详细介绍了基于JavaScript实现复选框的全选和取消全选,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了js复选框的全选和取消全选的具体代码,供大家参考, ...
实现全选和取消全选功能
<body> <div class="wrap"> <table> <thead> <tr> <th> &l ...
AVL_全选_取消全选_打印_ZMM1035
*&---------------------------------------------------------------------* *& Report ZMM1035 * ...
通过js控制layui选择框checkbox的选中、取消选中，以及使用layui实现全选、取消全选的一种方式
js控制选中.取消选中 ,layui实现全选.取消全选 layui版本2.5.x html部分: <form class="layui-form" id="form ...
react 全选_react实现全选、取消全选和个别选择
react里面实现全选和取消全选,个别选择等操作,效果如下代码: import React, {Component} from 'react' export default class Demo e ...

vue全选和取消全选（无bug）

很简单的使用vue实现全选和取消全选

vue全选和取消全选（无bug）相关推荐

最新文章

热门文章