使用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 添加网页桌面快捷方式的代码详细整理
Dec 27 Javascript
用原生JS获取CLASS对象(很简单实用)
Oct 15 Javascript
Javascript基础教程之switch语句
Jan 18 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
Jun 01 Javascript
JS自定义选项卡函数及用法实例分析
Sep 02 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
Dec 13 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
js实现蒙版效果
Jan 11 Javascript
二维码条形码生成的JavaScript脚本库
Jul 07 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
用PHP ob_start()控制浏览器cache、生成html实现代码
2010/02/16 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
Yii视图操作之自定义分页实现方法
2016/07/14 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
JS实现切换标签页效果实例代码
2013/11/01 Javascript
javascript的alert box在java中如何显示多行
2014/05/18 Javascript
JavaScript获取IP获取的是IPV6 如何校验
2016/06/12 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
2016/06/24 Javascript
js实现页面刷新滚动条位置不变
2016/11/27 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
vue中路由验证和相应拦截的使用详解
2017/12/13 Javascript
Angular异步变同步处理方法
2018/08/13 Javascript
微信小程序页面上下滚动效果
2020/11/18 Javascript
深入理解javascript prototype的相关知识
2019/09/19 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
python获取远程图片大小和尺寸的方法
2015/03/26 Python
机器学习python实战之决策树
2017/11/01 Python
python实现微信防撤回神器
2019/04/29 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
python 6种方法实现单例模式
2020/12/15 Python
Scrapy实现模拟登录的示例代码
2021/02/21 Python
JAVA招聘远程笔试题
2015/07/23 面试题
销售顾问岗位职责
2014/02/25 职场文书
安全责任书范本
2014/04/15 职场文书
公司市场专员岗位职责
2014/06/29 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers