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 formValidator表单验证插件开源了 含API帮助、源码、示例
Aug 14 Javascript
js动态创建表格,删除行列的小例子
Jul 20 Javascript
Javascript写入txt和读取txt文件示例
Feb 12 Javascript
js实现选中复选框文字变色的方法
Aug 14 Javascript
javascript实现下拉提示选择框
Dec 29 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
JavaScript正则表达式简单实用实例
Jun 23 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
Sep 19 Javascript
vue+Element实现搜索关键字高亮功能
May 28 Javascript
layui 解决form表单点击无反应的问题
Oct 25 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
Feb 11 Javascript
nuxt 每个页面head标签内容设置方式
Nov 05 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
2020年4月放送!《Princess Connect Re:Dive》制作组 & 角色声优公开!
2020/03/06 日漫
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
PHP序列号生成函数和字符串替换函数代码
2012/06/07 PHP
php全局变量和类配合使用深刻理解
2013/06/05 PHP
深入掌握include_once与require_once的区别
2013/06/17 PHP
smarty模板中使用get、post、request、cookies、session变量的方法
2014/04/24 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
PHP面相对象中的重载与重写
2017/02/13 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
利用谷歌地图API获取点与点的距离的js代码
2012/10/11 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
jQuery中:input选择器用法实例
2015/01/03 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
jQuery EasyUI提交表单验证
2016/07/19 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
元素全屏的设置与监听实例
2017/11/28 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
Express结合Webpack的全栈自动刷新
2019/05/23 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
详解Python中__str__和__repr__方法的区别
2015/04/17 Python
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
python 实现登录网页的操作方法
2018/05/11 Python
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
Django ORM多对多查询方法(自定义第三张表&amp;ManyToManyField)
2019/08/09 Python
Python如何获取文件路径/目录
2020/09/22 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
团代会主持词
2014/04/02 职场文书
住宅质量保证书
2014/04/29 职场文书
企业标语口号
2014/06/10 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书