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 相关文章推荐
js 操作符实例代码
Oct 24 Javascript
javascript客户端解决方案 缓存提供程序
Jul 14 Javascript
jquery 实现密码框的显示与隐藏示例代码
Sep 18 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
js自制图片放大镜功能
Jan 24 Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
详解vue.js移动端配置flexible.js及注意事项
Apr 10 Javascript
VUE路由动态加载实例代码讲解
Aug 26 Javascript
在vue+element ui框架里实现lodash的debounce防抖
Nov 13 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 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 Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
AJAX的跨域访问-两种有效的解决方法介绍
2013/06/22 PHP
深入解析php中的foreach问题
2013/06/30 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
理解javascript中的闭包
2017/01/11 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
[00:52]黑暗之门更新 新英雄孽主驾临DOTA2
2016/08/24 DOTA
Python使用matplotlib实现在坐标系中画一个矩形的方法
2015/05/20 Python
一步步解析Python斗牛游戏的概率
2016/02/12 Python
Python使用Matplotlib实现雨点图动画效果的方法
2017/12/23 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
利用python计算时间差(返回天数)
2019/09/07 Python
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
高中生自我鉴定范文
2013/10/30 职场文书
建筑装饰学院室内设计专业个人自我评价
2013/12/07 职场文书
幼儿园教学随笔感言
2014/02/23 职场文书
干部考核评语
2014/04/29 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
博士生专家推荐信
2015/03/25 职场文书
人口与计划生育责任书
2015/05/09 职场文书
房屋质量投诉书
2015/07/02 职场文书