使用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实现页面图片等比例放大缩小功能
Feb 12 Javascript
AngularJS入门教程(二):AngularJS模板
Dec 06 Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 Javascript
jQuery动态星级评分效果实现方法
Aug 06 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
JS请求servlet功能示例
Jun 01 Javascript
深入理解vue-loader如何使用
Jun 06 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
typescript编写微信小程序创建项目的方法
Jan 29 Javascript
JavaScript parseInt0.0000005打印5原理解析
Jul 23 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
菜鸟学PHP之Smarty入门
2007/01/04 PHP
PHP版自动生成文章摘要
2008/07/23 PHP
浅析PHP的ASCII码转换类
2013/07/05 PHP
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
PHP7使用ODBC连接SQL Server2008 R2数据库示例【基于thinkPHP5.1框架】
2019/05/06 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
JavaScript实现换肤功能
2017/09/15 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
vue实现的请求服务器端API接口示例
2019/05/25 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
PHP魔术方法__ISSET、__UNSET使用实例
2014/11/25 Python
python+pyqt实现右下角弹出框
2017/10/26 Python
PyCharm下载和安装详细步骤
2019/12/17 Python
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
工程开工庆典邀请函
2014/02/01 职场文书
银行转正自我鉴定
2014/09/29 职场文书
博士生专家推荐信
2015/03/25 职场文书
小学英语课教学反思
2016/02/15 职场文书
公司转让协议书
2016/03/19 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技