精华内容
下载资源
问答
  • 主要介绍了在Vue项目中实现动态添加或者删除对象和对象数组的操作方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 小程序,动态增加删除JSON对象数组

    千次阅读 2018-08-05 09:28:58
    先看效果,在制作小程序时,经常遇到类似这种情况: 直接上代码: ... ...关键处是使用ES6中的filter过滤方法,删除对象数组中的第几个对象。 过滤更多的时候是用在过滤掉指定的内容。

    先看效果,在制作小程序时,经常遇到类似这种情况:

    直接上代码:

    <view class="add-btn" bindtap='addItems'>添加</view>
    
    <view wx:for="{{itemLists}}" wx:key="index" class='list'>
      <input type='text' value='{{item.id}}'></input>
      <text>{{item.time}}</text>
      <text class='delete-btn' data-idx='{{index}}' bindtap='deleteIitems'>删除</text>
    </view>
    .add-btn{
      background: chocolate;
      width: 200rpx;
      text-align: center;
      color: white;
      margin-bottom: 10px;
    }
    .list{
      display: flex;
      justify-content: space-around;
      border: 1px solid;
    }
    .delete-btn{
      background: red;
    }
    Page({
    
      data: {
        itemLists: [
          { id: 1, time: '00:00:00' },
          { id: 2, time: '00:00:00' },
          { id: 3, time: '00:00:00' }
        ]
      },
      addItems() {
        let list = this.data.itemLists
        list.push({ id: ~~(Math.random()*100), time: '00:00:00' })
        this.setData({
          itemLists: list
        })
      },
      deleteIitems(e) {
        let idx = e.currentTarget.dataset.idx
        let list = this.data.itemLists
        let filterRes = list.filter((ele,index) => {
          return index != idx
        })
        this.setData({
          itemLists: filterRes
        })
      }
    
    })

    总结:

    关键处是使用ES6中的filter过滤方法,删除对象数组中的第几个对象。

    过滤更多的时候是用在过滤掉指定的内容。

    展开全文
  • 在Vue项目中对数组进行动态添加或者删除对象和对象数组发布时间:2018-09-21 11:27,浏览次数:2947, 标签:Vue添加核心代码如下:this.data.push({ type: [{ value: '选项1', label: 'in' }, { value: '选项3', ...

    在Vue项目中对数组进行动态添加或者删除对象和对象数组

    发布时间:2018-09-21 11:27,

    浏览次数:2947

    , 标签:

    Vue

    添加核心代码如下:

    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

    obj = this.data[i]; if (obj.isDelete){ this.data.splice(i,1); i-- } }

    全部代码如下:

    ============================32、在Vue项目中实现动态添加或者删除对象和对象数组============================

    @click="deleteItem">

    placeholder="请选择" size="mini">

    :key="obj.value" :label="obj.label" :value="obj.value">

    :span="4">

    :span="24">

    :value="obj.value">

    clearable>

    class="grid-content bg-purple-light">

    v-model="item.default" clearable>

    class="grid-content bg-purple-light " id="checkboxSpacingDiv">

    size="medium">

    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.splice(i,1); i-- } } } } }

    效果图如下:

    展开全文
  • 添加核心代码如下: this.data.push...i 全部代码如下: ============================32、在Vue项目中实现动态添加或者删除对象和对象数组============================ 效果图如下: 更多技术请关注QQ群:636212586

    添加核心代码如下:

              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);
                }
              }

     

    全部代码如下:

    <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>
    

     效果图如下:

     

     

     

    更多技术请关注QQ群:636212586

     

    展开全文
  • i-- } } 全部代码如下: ============================32、在Vue项目中实现动态添加或者删除对象和对象数组============================ v-for="obj in item.type" :key="obj.value" :label="obj.label" :value=...

    添加核心代码如下:

    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

    let obj = this.data[i];

    if (obj.isDelete){

    this.data.splice(i,1);

    i--

    }

    }

    全部代码如下:

    ============================32、在Vue项目中实现动态添加或者删除对象和对象数组============================

    v-for="obj in item.type"

    :key="obj.value"

    :label="obj.label"

    :value="obj.value">

    v-for="obj in item.value"

    :key="obj.value"

    :label="obj.label"

    :value="obj.value">

    size="mini"

    placeholder="请输入内容"

    v-model="item.parameter"

    clearable>

    size="mini"

    placeholder="请输入内容"

    v-model="item.default"

    clearable>

    size="mini"

    placeholder="请输入内容"

    v-model="item.description"

    clearable>

    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

    let obj = this.data[i];

    if (obj.isDelete){

    this.data.splice(i,1);

    i--

    }

    }

    }

    }

    }

    效果图如下:

    总结

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

    展开全文
  • java之对象数组与管理

    2019-05-29 23:20:20
    对象数组就是数组里的每个元素都是类的对象,赋值时先定义对象,然后将对象直接赋值给数组。 示例: Chicken[] cs = new Chicken[10]; 使用对象数组实现多个Chicken的管理。 动态数组: 1、数组是一种线性数据结构。...
  • 用obj声明一个新的对象。i是数组对应对象的下标,用删除对象再重新增加的方法实现 vue的动态监听
  • 对象数组: 数组里的每个元素都是类的对象,复制时先定义对象,然后将对象直接赋给数组。 示例: Chicken[] cs = new Chicken[10]; 使用对象数组实现多个Chicken的管理 /** 小鸡管理 动态数组: 1、数组是一种线性...
  • java.util.vector提供了向量类(Vector)以实现类似动态数组的功能。创建了一个向量类的对象后,可以往其中随意插入不同类的对象,即不需顾及类型也不需预先选定向量的容量,并可以方便地进行查找。对于预先不知或者不...
  • Java动态数组是一种可以任意伸缩数组长度的对象,在Java中比较常用的是ArrayList,ArrayList是javaAPI中自带的java.util.ArrayList。下面介绍一下ArrayList作为Java动态数组的用法。1.语法:add()是添加一个新的元素...
  • 1、完成对象删除前的的一些清理工作; 2、在对象生存周期结束之后系统会自动调用析构函数,然后释放此对象的空间; 3、如果程序没有声明构造函数,系统会默认自动产生一个隐含的构造函数; 4、析构函数只能有一...
  • /*  *  * mainTab是TabControl的一个实例  * 实现功能:关闭除此之外的TabPage对象  */  /*  * 方法一  * 删除动态数组的时候,下标由大到小删除  */...
  • 工作中遇到一个问题就是要动态数组对象中添加或者删除某个数组,,本来想用for循环的但是这样就会有一个bug就是每次都会添加,,最后只能使用indexOF  var a =[{"name":"1111"},{"name":"222"}] console.log...
  • ElementUI中的el-table中实现动态添加一行、删除一行、清空所有行: https://mp.csdn.net/console/editor/html/107815187 上面实现的效果如下 其中每一行都是动态添加的,每一行对应的是一个对象,每一列...
  • Java动态数组

    千次阅读 多人点赞 2018-07-18 10:38:44
     Java动态数组是一种可以任意伸缩数组长度的对象,在Java中比较常用的是ArrayList,ArrayList是javaAPI中自带的java.util.ArrayList。下面介绍一下ArrayList作为Java动态数组的用法。 语法:add()是添加一个新的...
  • Vue-动态修改数组

    2018-09-10 10:20:00
     点击删除时,仅删除当前选中的这个对象。 html: <el-card shadow="never" style="position: relative;"> <div class="lottery-ct"> 总量: <el-input type="number" @change="...
  • Js对象 对象中包含一系列属性,js中除了基本类型...对象结构属性可动态添加和删除 delete obj.z -》 属性具有属性标签及get/set方法 原型 会沿着原型链一直往上找 class 对象属于哪一个种类 extensible 是否允许新增属
  • 主要介绍了JavaScript数组,JSON对象实现动态添加、修改、删除功能,结合实例形式分析了JavaScript针对json数组的添加、删除、修改操作实现技巧,需要的朋友可以参考下
  • 动态数组在python中,列表,集合和字典是可变对象。数字,字符串和元组是不可变的对象。可变对象意味着我们从列表,集合或字典中添加/删除项目,但是对于不可变对象(例如元组或字符串)而言,情况并非如此。在python...
  • 基于面向对象思维(封装)实现一个动态数组(MyArray) 1. 能够无限的向数组中添加元素 2. 可以通过get方法获取指定位置的元素 3. 可以通过size方法获取数组中元素的个数 4. 可以通过remove方法删除数组中的指定元素
  • vector动态数组

    2020-03-31 20:37:39
    (1)Vector(向量)是一个封装了动态数组的顺序容器,可以存放任意类型对象。 (2)特性:顺序序列,动态数组,感知内存分配器 (3)头文件:#include (4)用法:vector<元素类型>ve 定义 ve.push_back(1); ...
  • 动态数组的增删改

    2021-01-04 21:47:12
    动态数组的增删改 引入命名空间 using System.Collections; 实例化一个动态数组 ArrayList 数组名=new ArrayList();//实例化 ArrayList 数组名=new ArrayList(){成员1,成员n};//实例化并初始化 增加 对象.Add...
  • JAVA动态数组

    2013-01-17 14:38:00
    Java动态数组是一种可以任意伸缩数组长度的对象,在Java中比较常用的是ArrayList,ArrayList是javaAPI中自带的java.util.ArrayList。下面介绍一下ArrayList作为Java动态数组的用法。 1.语法:add()是添加一个新的...
  • 我们一起做的通讯录在上一篇的文章中已经可以动态添加联系人了,但是还不能根据动态添加的联系人进行查询、修改和删除。今天我们就一起把剩下的功能全部都实现了,因为有了之前写添加的经验,我们接下来写查询、修改...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,123
精华内容 449
关键字:

删除动态对象数组