使用vue根据状态添加列表数据和删除列表数据的实例


Posted in Javascript onSeptember 29, 2018

如下所示:

<template>
 <div>
  <div v-for="obj of a" @click="sel(obj)">
   {{obj.name}} <span v-if="!obj.select">+</span><span v-else>-</span>
  </div>
  <hr>
  <div>
   <div v-for="(obj,index) in temp" @click="cel(obj,index)">{{obj}}</div>
  </div>
 </div>
</template>
<script>
export default {
 methods: {
  sel(obj){
   obj.select = !obj.select
   if(obj.select){
    this.temp.push(obj)
   }else{
    obj.select = !obj.select
   }   
  },
  cel(obj,index){
   obj.select = !obj.select;
   console.log(index)
   this.temp.splice(index,1);   
  }
 },
 data(){
  return {
   temp:[],
   a:[{
   "code": "1",
   "name": "1",
   "cityId": 8,
   "regionId": null,
   "blockId": null,
   "cityName": null,
   "regionName": null,
   "blockName": null,
   "address": "刀茅巷216号",
   "buildingNum": null,
   "unitNum": null,
   "houseNum": null,
   "completeTime": null,
   "developer": null,
   "id": null,
   "pinYin": null,
   "pinYinFirst": null,
   "pinYinShort": null,
   select:false
  },{
   select:false,
   "code": "2",
   "name": "2",
   "cityId": 8,
   "regionId": null,
   "blockId": null,
   "cityName": null,
   "regionName": null,
   "blockName": null,
   "address": "刀茅巷216号",
   "buildingNum": null,
   "unitNum": null,
   "houseNum": null,
   "completeTime": null,
   "developer": null,
   "id": null,
   "pinYin": null,
   "pinYinFirst": null,
   "pinYinShort": null
  },{
   select:false,
   "code": "3",
   "name": "3",
   "cityId": 8,
   "regionId": null,
   "blockId": null,
   "cityName": null,
   "regionName": null,
   "blockName": null,
   "address": "刀茅巷216号",
   "buildingNum": null,
   "unitNum": null,
   "houseNum": null,
   "completeTime": null,
   "developer": null,
   "id": null,
   "pinYin": null,
   "pinYinFirst": null,
   "pinYinShort": null
  }],
  }
 }
}
</script>

以上这篇使用vue根据状态添加列表数据和删除列表数据的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 实现的全选和反选
Apr 15 Javascript
json2.js的初步学习与了解
Oct 06 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
利用JavaScript如何查询某个值是否数组内
Jul 30 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
Dec 15 Javascript
vue2.0安装style/css loader的方法
Mar 14 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
Apr 23 Javascript
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 Javascript
vue的for循环使用方法
Feb 12 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
Sep 29 #Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 #Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
Sep 29 #Javascript
使用electron将vue-cli项目打包成exe的方法
Sep 29 #Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 #Javascript
基于vue和react的spa进行按需加载的实现方法
Sep 29 #Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 #Javascript
You might like
如何删除多级目录
2006/10/09 PHP
thinkphp3查询mssql数据库乱码解决方法分享
2014/02/11 PHP
php实现的一个简单json rpc框架实例
2015/03/30 PHP
php header函数的常用http头设置
2015/06/25 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
php和vue配合使用技巧和方法
2019/05/09 PHP
浅谈Laravel模板实体转义带来的坑
2019/10/22 PHP
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
js中if语句的几种优化代码写法
2011/03/12 Javascript
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
javaScript封装的各种写法
2017/08/14 Javascript
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python中实现的RC4算法
2015/02/14 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
Python人脸识别第三方库face_recognition接口说明文档
2019/05/03 Python
对PyQt5基本窗口控件 QMainWindow的使用详解
2019/06/19 Python
python实现TCP文件传输
2020/03/20 Python
python 实现表情识别
2020/11/21 Python
编译 pycaffe时报错:fatal error: numpy/arrayobject.h没有那个文件或目录
2020/11/29 Python
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
日语求职信范文
2013/12/17 职场文书
竞选部门副经理的自荐书范文
2014/02/11 职场文书
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
祖国在我心中的演讲稿
2014/05/04 职场文书
保护动物的标语
2014/06/11 职场文书
党员查摆剖析材料
2014/10/10 职场文书
搞笑婚庆主持词
2015/06/29 职场文书
仓库管理制度范本
2015/08/04 职场文书
Node与Python 双向通信的实现代码
2021/07/16 Javascript
Redis基本数据类型Zset有序集合常用操作
2022/06/01 Redis