Vue常用的全选/反选的示例代码


Posted in Javascript onFebruary 19, 2020

在Vue中执行CheckBox的全选反选有很多方法

我觉得最易懂,速度最快的方法就是这个!

首先就是自己创建一个input,正在mx.txt的前方添加一个input:CheckBox。在v-model加上你每次创建出来的mx.check

最重点就在于forEach遍历,出来的都是当前的。
有些人不注意的一点,为什么data里面没有check:[]这样的出现。
data里的是实时监控,你点一次自动将所有的check都变成了true。

<template>
 <div class="check">
 <button @click="checkAll">全选</button>
 <br>
 <input type="text" v-model="txt" @keyup.enter="ck" />
 <ul>
 <li v-for="(mx, index) in list" :key="index">
 <input type="checkbox" v-model="mx.check" /> {{mx.txt}}
 </li>
 </ul>
 </div>
</template>
<script>
 export default {
 data() {
 return {
 txt: "",
 list: []
 }
 },
 methods: {
 ck() {
 this.list.push({
  txt: this.txt,
  check: false
 })

 this.txt = ""
 },
 checkAll() {

 this.list.forEach((mx) => {
  mx.check = !mx.check
 })

 }
 }
 }
</script>
<style lang="less">
 .check {
 cursor: pointer;

 button {
 cursor: pointer;
 border: 0;
 padding: 10px 30px;
 background: #000;
 color: #fff;
 border-radius: 100px;
 margin-bottom: 10px;
 outline: none;
 }

 input {
 padding: 15px;
 width: 300px;
 border: 0;
 box-shadow: 0 0 15px #ccc;
 }

 ul {
 width: 300px;
 padding: 0;
 cursor: pointer;
 box-shadow: 0 0 15px #ccc;
 min-height: 300px;
 padding: 15px;
 list-style: none;

 li {
 cursor: pointer;
 margin-bottom: 12px;

 >input {
  padding: 0;
  width: auto;
 }
 }
 }
 }
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
FCK调用方法..
Dec 21 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
date.parse在IE和FF中的区别
Jul 29 Javascript
jquery交替变换颜色的三种方法 实例代码
Nov 19 Javascript
JavaScript 获取任一float型小数点后两位的小数
Jun 30 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
Oct 17 Javascript
JS实现两表格里数据来回转移的方法
May 28 Javascript
详解jQuery的表单验证插件--Validation
Dec 21 Javascript
原生js实现返回顶部缓冲效果
Jan 18 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 Javascript
Vue实现购物车基本功能
Nov 08 Javascript
详解node和ES6的模块导出与导入
Feb 19 #Javascript
JS实现分页导航效果
Feb 19 #Javascript
vue随机验证码组件的封装实现
Feb 19 #Javascript
JavaScript实现PC端四格密码输入框功能
Feb 19 #Javascript
vue实现带过渡效果的下拉菜单功能
Feb 19 #Javascript
Vue.js仿Select下拉框效果
Feb 18 #Javascript
JavaScript中的惰性载入函数及优势
Feb 18 #Javascript
You might like
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
PHP信号量基本用法实例详解
2016/02/12 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
模拟用户操作Input元素,不会触发相应事件
2007/05/11 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
vue中的循环对象属性和属性值用法
2020/09/04 Javascript
[49:31]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第二场 1月29日
2021/03/11 DOTA
Python守护进程(daemon)代码实例
2015/03/06 Python
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
Python装饰器基础详解
2016/03/09 Python
Python实现正弦信号的时域波形和频谱图示例【基于matplotlib】
2018/05/04 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
python实现邮件循环自动发件功能
2020/09/11 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
华润集团网上药店:健一网
2016/09/19 全球购物
实用求职信范文分享
2013/12/25 职场文书
市场专员岗位职责
2014/02/14 职场文书
矿泉水广告词
2014/03/20 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
初婚未育证明样本
2014/10/24 职场文书
学生个人评语大全
2015/01/04 职场文书
教师个人培训总结
2015/02/11 职场文书
物业工程部经理岗位职责
2015/04/09 职场文书
总经理致辞
2015/07/29 职场文书
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android
如何使用pdb进行Python调试
2021/06/30 Python
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers
使用CSS实现百叶窗效果示例代码
2023/05/07 HTML / CSS