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

如下所示：

<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根据状态添加列表数据和删除列表数据的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue 实现列表动态添加和删除的两种方法小结

    下面将介绍两种方式实现动态添加和删除列表 1.不使用组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - vue实现列表增加和删除</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script&g

  • 实例分析vue循环列表动态数据的处理方法

    调用方法:Vue.set( target, key, value ) target:要更改的数据源(可以是对象或者数组) key:要更改的具体数据 value :重新赋的值 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"

  • vue动态删除从数据库倒入列表的某一条方法

    如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> //导入vue.js <script type="text/javascript" src="./vue.js"></script> //非常简单了设置了一下css样式 <style type=&q

  • Vue实现动态创建和删除数据的方法

    视图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> //导入vue.js <script type="text/javascript" src="./vue.js"></script> //非常简单了设置了一下css样式 <style typ

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

    如下所示: <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=&

  • C# 添加、修改和删除PDF书签的实例代码

    C# 添加、修改和删除PDF书签的实例代码

    有时候我们在阅读PDF文档时会遇到这样一种情况:PDF文档页数比较多,但是又没有书签,所以我们不能根据书签快速了解文档所讲解的内容,也不能点击书签快速跳转到相应的位置,而只能一页一页的翻阅,非常苦恼.相信开发人员在开发和PDF有关的应用程序时,也会有这样的功能需求,因此在这篇文章中我就介绍一下如何使用编程的方式(C#)和Spire.PDF组件给PDF文档添加书签(包括添加书签到现有文档和添加子书签),以及修改和删除现有PDF文档中的指定书签. Spire.PDF组件概述 Spire.PDF是一个

  • Mysql数据库值的添加、修改、删除及清空操作实例

    Mysql数据库值的添加、修改、删除及清空操作实例

    3.MySQL数据管理 第一种方式:不太建议,看起来复杂些 -- 学生表的 gradeid 字段,要去引用 年级表的 gradeid -- 定义外键key -- 给这个外键添加约束,(执行引用),REFERENCES 引用 key `FK_gradeid`(`gradeid`) CONSTRAINT `FK_gradeid` FOREIGN KEY (`gradeid`) REFERENCES `grade`(`gradeid`) 第二种方式:建议 -- 创建表成功后,添加外键约束 -- 创建表

  • MySQL查询重复数据（删除重复数据保留id最小的一条为唯一数据）

    MySQL查询重复数据（删除重复数据保留id最小的一条为唯一数据）

    开发背景: 最近在做一个批量数据导入到MySQL数据库的功能,从批量导入就可以知道,这样的数据在插入数据库之前是不会进行重复判断的,因此只有在全部数据导入进去以后在执行一条语句进行删除,保证数据唯一性. 下面话不多说了,来一起看看详细的介绍吧 实战: 表结构如下图所示: 表明:brand 操作: 使用SQL语句查询重复的数据有哪些: SELECT * from brand WHERE brandName IN( select brandName from brand GROUP BY brand

  • vue主动刷新页面及列表数据删除后的刷新实例

    1.场景 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求. 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好 3.解决方法 provide / inject 组合 作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效. App.vue: 声明reload方法,控制

  • 使用Bootstrap + Vue.js实现添加删除数据示例

    使用Bootstrap + Vue.js实现添加删除数据示例

    界面首先需要引入bootstrap的css和bootstrap的js文件,还有vue.js和jQuery.js才可以看见效果. 这里提供bootstrap的在线文件给大家引用: <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="

  • vue实现动态添加数据滚动条自动滚动到底部的示例代码

    在使用vue实现聊天页面的时候,聊天数据动态加到页面中,需要实现滚动条也自动滚动到底部.这时我找到网上有个插件 vue-chat-scroll https://www.npmjs.com/package/vue-chat-scroll 但是安装后发现是用不了的,报错信息如下: VM14383:27 [Vue warn]: Failed to resolve directive: chat-scroll (found in <Hello>) 这个一直找不到原因,可能是我vue的版本是2.2不支持

  • VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）

    一.问题 用elementUi横着增加一行数据没毛病,可以操作 添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效 点击下一行时 值就变过来 二.原因 横向添加 是复制上面的某一条数据来的,因为data里面有这些属性的定义,所以横向添加没问题 而纵向添加的数据,因为没有事先在 el-select v-modle="" 里面定义好字段,定义好的option是通过v-for出来的(option是写死的就不会有这个问题),就会出现选择后,select元素上无法展示,但是其实数

  • vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解

    vue中,我们所要实现的一个场景就是: 1.搜索页面==>到搜索结果页时,搜索结果页面要重新获取数据, 2.搜索结果页面==>点击进入详情页==>从详情页返回列表页时,要保存上次已经加载的数据和自动还原上次的浏览位置. 最近在项目中遇到这个问题,思考了几套方案,总是不太完善.百度搜到的方案也基本都只能满足一些很简单的需求.对于复杂一些的情况,还是有些不完善的地方.以下是个人对于这种场景的一个摸索,也参考了百度.如有更好的方案,欢迎指出. 缓存组件,vue2中提供了keep-alive.首

  • Vue的状态管理vuex使用方法详解

    Vue的状态管理vuex使用方法详解

    引入vuex 当访问数据对象时,一个 Vue 实例只是简单的代理访问.所以,如果有一处需要被多个实例间共享的状态,可以简单地通过维护一份数据来实现共享 const sourceOfTruth = {} const vmA = new Vue({ data: sourceOfTruth }) const vmB = new Vue({ data: sourceOfTruth }) 现在当 sourceOfTruth 发生变化,vmA 和 vmB 都将自动的更新引用它们的视图.子组件们的每个实例也会

随机推荐