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 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
Oct 11 Javascript
js substring从右边获取指定长度字符串(示例代码)
Dec 23 Javascript
jQuery提交多个表单的小技巧
Jul 27 Javascript
jQuery学习心得总结(必看篇)
Jun 10 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
JS面试题大坑之隐式类型转换实例代码
Oct 14 Javascript
vue+php实现的微博留言功能示例
Mar 16 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
小程序的上传文件接口的注意要点解析
Sep 17 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 Javascript
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
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
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
php使用websocket示例详解
2014/03/12 PHP
PHP模块memcached使用指南
2014/12/08 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
PHP共享内存使用与信号控制实例分析
2018/05/09 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
JQuery动态添加和删除表格行的方法
2015/03/09 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
javascript封装 Cookie 应用接口
2015/08/07 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
2016/05/25 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
jQuery中animate的几种用法与注意事项
2016/12/12 Javascript
浅析Vue中method与computed的区别
2018/03/06 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
[03:48]大碗DOTA
2019/07/25 DOTA
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
python实现将内容分行输出
2015/11/05 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
Python @property使用方法解析
2019/09/17 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
前处理班长职位说明书
2014/03/01 职场文书
小学生评语集锦
2014/04/18 职场文书
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
大学生个人总结范文
2015/02/15 职场文书
R9700摩机记
2022/04/05 无线电
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS