使用vue.js实现checkbox的全选和多个的删除功能


Posted in Javascript onFebruary 17, 2017

template代码:

<template> 
<div class="hello"> 
<ul> <li v-for="(item, index) in proData"> 
<label for=""> 
<input type="checkbox" :value="index" v-model="selectArr"> 
</label>{{item.name}} 
</li>: 
</ul> 
<button type="" @click="del">删除</button>{{selectArr}} 
<label> 
<input type="checkbox" class="checkbox" @click="selectAll" />全选 
</label> 
</div> 
</template>

script部分:

<script>
var proData = [{
  "name": "j1ax"
}, {
  "name": "j2ax"
}, {
  "name": "j3ax"
}, {
  "name": "j4ax"
}]
export default {
  name: 'hello',
  data() {
    return {
      proData: proData,
      selectArr: []
    }
  },
  created() {
    this.$http.get('/api/home').then(function(response) {
      response = response.body;
      this.proData = response.data;
    })
  },
  methods: {
    del() {
      let arr = [];
      var len = this.proData.length;
      for (var i = 0; i < len; i++) {
        if (this.selectArr.indexOf(i)>=0) {
          console.log(this.selectArr.indexOf(i))
        }else{
          arr.push(proData[i])
        }
      }
      this.proData = arr;
      this.selectArr = []
    },
    selectAll(event) {
      var _this = this;
      console.log(event.currentTarget)
      if (!event.currentTarget.checked) {
        this.selectArr = [];
      } else { //实现全选
        _this.selectArr = [];
        _this.proData.forEach(function(item, i) {
          _this.selectArr.push(i);
        });
      }
    }
  }
}
</script>

以上所述是小编给大家介绍的使用vue.js实现checkbox的全选和多个的删除功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
Jul 22 Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 Javascript
JS验证字符串功能
Feb 22 Javascript
官方推荐react-navigation的具体使用详解
May 08 Javascript
利用vscode调试编译后的js代码详解
May 14 Javascript
vue视图不更新情况详解
May 16 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 Javascript
js实现横向拖拽导航条功能
Feb 17 #Javascript
js转换对象为xml
Feb 17 #Javascript
EsLint入门学习教程
Feb 17 #Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 #Javascript
AngularJS执行流程详解
Feb 17 #Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 #Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
Feb 17 #Javascript
You might like
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
PHP产生随机字符串函数
2006/12/06 PHP
PHP XML操作类DOMDocument
2009/12/16 PHP
腾讯QQ微博API接口获取微博内容
2013/10/30 PHP
完善CodeIgniter在IDE中代码提示功能的方法
2014/07/19 PHP
php三种实现多线程类似的方法
2015/10/30 PHP
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
PHP基于自定义类随机生成姓名的方法示例
2017/08/05 PHP
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
2010/07/24 Javascript
jquery的extend和fn.extend的使用说明
2011/01/09 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
js date 格式化
2017/02/15 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
ionic2懒加载配置详解
2017/09/01 Javascript
JS中Object对象的原型概念基础
2018/01/29 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
React性能优化系列之减少props改变的实现方法
2019/01/17 Javascript
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
python getpass模块用法及实例详解
2019/10/07 Python
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
视图的作用
2014/12/19 面试题
建筑专业自我鉴定
2013/10/22 职场文书
党支部承诺书范文
2014/03/28 职场文书
《孔繁森》教学反思
2014/04/17 职场文书
2014年学生会个人工作总结
2014/11/07 职场文书
2014年检验科工作总结
2014/11/22 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
2015年党支部公开承诺书
2015/01/22 职场文书
护理专业自我评价
2015/03/11 职场文书
社区活动总结范文
2015/05/07 职场文书
2015年机关后勤工作总结
2015/05/26 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript