Vue实现动态添加或者删除对象和对象数组的操作方法


Posted in Javascript onSeptember 21, 2018

添加核心代码如下:

this.data.push({
      type: [{
       value: '选项1',
       label: 'in'
      },
       {
        value: '选项3',
        label: 'out'
       }],
      value:[{
       value: '选项1',
       label: 'CSV'
      },
       {
        value: '选项3',
        label: 'TSV'
       }],
      parameter:'',
      default:'',
      description:'',
      isDelete:false,
     });

删除核心代码如下:

/*遍历数组,然后根据选中的状态获取对应的下标,然后进行删除*/
     for (let i = 0;i<this.data.length;i++){
      let obj = this.data[i];
      if (obj.isDelete){
       this.data.splice(i,1);
       i--
      }
     }

全部代码如下:

<template>
  <div>
   ============================32、在Vue项目中实现动态添加或者删除对象和对象数组============================
   <div>
    <el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
    <el-button type="primary" icon="el-icon-delete" @click="deleteItem"></el-button>
    <el-row :gutter="50"  v-for="(item,index) in data" :key="index">
     <!--Type-->
     <el-col :span="4">
      <div class="grid-content bg-purple">
       <el-row >
        <el-col :span="24">
         <el-select v-model="value" placeholder="请选择" size="mini">
          <el-option
           v-for="obj in item.type"
           :key="obj.value"
           :label="obj.label"
           :value="obj.value">
          </el-option>
         </el-select>
        </el-col>
       </el-row >
      </div>
     </el-col>
     <!--value-->
     <el-col :span="4">
      <div class="grid-content bg-purple-light">
       <el-row >
        <el-col :span="24">
         <el-select v-model="value" placeholder="请选择" size="mini">
          <el-option
           v-for="obj in item.value"
           :key="obj.value"
           :label="obj.label"
           :value="obj.value">
          </el-option>
         </el-select>
        </el-col>
       </el-row >
      </div>
     </el-col>
     <!--Parameter-->
     <el-col :span="4">
      <div class="grid-content bg-purple">
       <el-input
        size="mini"
        placeholder="请输入内容"
        v-model="item.parameter"
        clearable>
       </el-input>
      </div>
     </el-col>
     <!--Default-->
     <el-col :span="4">
      <div class="grid-content bg-purple-light">
       <el-input
        size="mini"
        placeholder="请输入内容"
        v-model="item.default"
        clearable>
       </el-input>
      </div>
     </el-col>
     <!--Description-->
     <el-col :span="4">
      <div class="grid-content bg-purple">
       <el-input
        size="mini"
        placeholder="请输入内容"
        v-model="item.description"
        clearable>
       </el-input>
      </div>
     </el-col>
     <!--Del-->
     <el-col :span="4">
      <div class="grid-content bg-purple-light " id="checkboxSpacingDiv">
       <!-- `checked` 为 true 或 false -->
       <el-checkbox v-model="item.isDelete" size="medium"></el-checkbox>
      </div>
     </el-col>
    </el-row>
   </div>
  </div>
</template>
<script>
  export default {
    name: "VueArrays_32",
   data(){
     return {
      data:[
       {
        type: [{
         value: '选项1',
         label: 'in'
        },
         {
          value: '选项3',
          label: 'out'
         }],
        value:[{
         value: '选项1',
         label: 'CSV'
        },
         {
          value: '选项3',
          label: 'TSV'
         }],
        parameter:'',
        default:'',
        description:'',
        isDelete:false,
       },
      ],
     }
   },
   methods:{
    add(){
     this.data.push({
      type: [{
       value: '选项1',
       label: 'in'
      },
       {
        value: '选项3',
        label: 'out'
       }],
      value:[{
       value: '选项1',
       label: 'CSV'
      },
       {
        value: '选项3',
        label: 'TSV'
       }],
      parameter:'',
      default:'',
      description:'',
      isDelete:false,
     });
    },
    deleteItem(){
     /*遍历数组,然后根据选中的状态获取对应的下标,然后进行删除*/
     for (let i = 0;i<this.data.length;i++){
      let obj = this.data[i];
      if (obj.isDelete){
       this.data.splice(i,1);
       i--
      }
     }
    }
   }
  }
</script>
<style scoped>
</style>

 效果图如下:

Vue实现动态添加或者删除对象和对象数组的操作方法

总结

以上所述是小编给大家介绍的Vue实现动态添加或者删除对象和对象数组的操作方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
引用其它js时如何同时处理多个window.onload事件
Sep 02 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
AngularJS中的API(接口)简单实现
Jul 28 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
Bootstrap Table使用方法解析
Oct 19 Javascript
Javascript中的prototype与继承
Feb 06 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
纯JS实现可用于页码更换的飞页特效示例
May 21 Javascript
JavaScript实现点击切换验证码及校验
Jan 10 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
Sep 21 #Javascript
React实现全局组件的Toast轻提示效果
Sep 21 #Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
Sep 21 #Javascript
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 #Javascript
解决vue keep-alive 数据更新的问题
Sep 21 #Javascript
vue axios基于常见业务场景的二次封装的实现
Sep 21 #Javascript
vue2使用keep-alive缓存多层列表页的方法
Sep 21 #Javascript
You might like
PHP积分兑换接口实例
2015/02/09 PHP
PHP中ltrim与rtrim去除左右空格及特殊字符实例
2016/01/07 PHP
List Information About the Binary Files Used by an Application
2007/06/18 Javascript
JavaScript中的View-Model使用介绍
2011/08/11 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
2015/03/31 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
解决js图片加载时出现404的问题
2020/11/30 Javascript
详解jQuery中的empty、remove和detach
2016/04/11 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
Vue页面骨架屏的实现方法
2018/05/22 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
python paramiko模块学习分享
2017/08/23 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
关于Python3 类方法、静态方法新解
2019/08/30 Python
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
美国知名的百货清仓店:Neiman Marcus Last Call
2016/08/03 全球购物
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
博柏利美国官方网站:Burberry美国
2020/11/19 全球购物
数据库连接池的工作原理
2012/09/26 面试题
iostream与iostream.h的区别
2015/01/16 面试题
施工安全协议书
2013/12/11 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
员工年度工作总结2015
2015/05/18 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
nginx容器方式反向代理实战
2022/04/18 Servers
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS