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 相关文章推荐
基于Jquery的文字自动截取(提供源代码)
Aug 09 Javascript
一个可拖拽列宽表格实例演示
Nov 26 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
Jan 22 Javascript
理解js对象继承的N种模式
Jan 25 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
Node.js 回调函数实例详解
Jul 06 Javascript
js单页hash路由原理与应用实战详解
Aug 14 Javascript
关于JavaScript语句后面的分号问题
Dec 07 Javascript
vue+iview 兼容IE11浏览器的实现方法
Jan 07 Javascript
详解如何更好的使用module vuex
Mar 27 Javascript
详解小程序之简单登录注册表单验证
May 13 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
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
php抽象类用法实例分析
2015/07/07 PHP
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
javascript中不等于的代码是什么怎么写
2013/12/29 Javascript
jquery选择器原理介绍($()使用方法)
2014/03/25 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
nodejs爬虫抓取数据之编码问题
2015/07/03 NodeJs
JavaScript高级程序设计(第三版)学习笔记6、7章
2016/03/11 Javascript
node.js实现端口转发
2016/04/14 Javascript
JS图片定时翻滚效果实现方法
2016/06/21 Javascript
JavaScript实现公历转农历功能示例
2017/02/13 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
JavaScript中ES6规范中let和const的用法和区别
2020/08/06 Javascript
[01:28:24]NAVI vs VG Supermajor 败者组 BO3 第三场 6.5
2018/06/06 DOTA
python连接oracle数据库实例
2014/10/17 Python
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
python之文件的读写和文件目录以及文件夹的操作实现代码
2016/08/28 Python
python实现12306火车票查询器
2017/04/20 Python
谈谈python中GUI的选择
2018/03/01 Python
python正则表达式匹配[]中间为任意字符的实例
2018/12/25 Python
详解pandas.DataFrame中删除包涵特定字符串所在的行
2019/04/04 Python
python实现得到当前登录用户信息的方法
2019/06/21 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
社区母亲节活动方案
2014/03/05 职场文书
运动会方队口号
2014/06/07 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL