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类继承机制的原理分析
Sep 12 Javascript
基于mootools 1.3框架下的图片滑动效果代码
Apr 22 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 Javascript
完美实现仿QQ空间评论回复特效
May 06 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
Dec 08 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
Jun 07 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
Jun 13 Javascript
JavaScript实现瀑布流图片效果
Jun 30 Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
解决elementui表格操作列自适应列宽
Dec 28 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入门速成(2)
2006/10/09 PHP
从php核心代码分析require和include的区别
2011/01/02 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
php取出数组单个值的方法
2018/03/12 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
PHP连接MySQL数据库三种实现方法
2020/12/10 PHP
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
JavaScript中的prototype原型学习指南
2016/05/09 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
python 换位密码算法的实例详解
2017/07/19 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
塑料制成的可水洗的编织平底鞋和鞋子:Rothy’s
2018/09/16 全球购物
医院后勤自我鉴定
2013/10/13 职场文书
入党积极分子思想汇报范文
2014/01/05 职场文书
学习十八大坚定理想信念心得体会
2014/03/11 职场文书
建筑工地文明标语
2014/10/09 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
文明班级申报材料
2014/12/24 职场文书
社区文明倡议书
2015/04/28 职场文书
大学班干部竞选稿
2015/11/20 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书
iPhone13 Pro外观确定,升级4800万镜头,4月20日发新品
2021/04/15 数码科技
MySQL连接控制插件介绍
2021/09/25 MySQL
浅析python中特殊文件和特殊函数
2022/02/24 Python