-
Vue实现动态添加或者删除对象和对象数组的操作方法
2020-10-17 23:40:12主要介绍了在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 数组中对象删除属性_在Vue项目中对数组进行动态添加或者删除对象和对象数组...
2020-12-22 16:13:24在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-- } } } } }
效果图如下:
-
在Vue项目中对数组进行动态添加或者删除对象和对象数组
2018-09-21 11:27:05添加核心代码如下: 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
-
vue根据索引删除数组中的一个对象_Vue实现动态添加或者删除对象和对象数组的操作方法...
2020-12-24 00:19:46i-- } } 全部代码如下: ============================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、数组是一种线性数据结构。... -
vue 解决vue无法动态监听数组/对象的改变
2020-06-20 09:55:25用obj声明一个新的对象。i是数组对应对象的下标,用删除对象再重新增加的方法实现 vue的动态监听 -
java对象数组案例(增删改查操作)
2020-05-04 16:34:09对象数组: 数组里的每个元素都是类的对象,复制时先定义对象,然后将对象直接赋给数组。 示例: Chicken[] cs = new Chicken[10]; 使用对象数组实现多个Chicken的管理 /** 小鸡管理 动态数组: 1、数组是一种线性... -
java 自增数组_Java Vector可实现自动增长的对象数组
2021-02-28 16:48:29java.util.vector提供了向量类(Vector)以实现类似动态数组的功能。创建了一个向量类的对象后,可以往其中随意插入不同类的对象,即不需顾及类型也不需预先选定向量的容量,并可以方便地进行查找。对于预先不知或者不... -
java 动态数组_Java动态数组的用法详解
2021-02-12 09:09:36Java动态数组是一种可以任意伸缩数组长度的对象,在Java中比较常用的是ArrayList,ArrayList是javaAPI中自带的java.util.ArrayList。下面介绍一下ArrayList作为Java动态数组的用法。1.语法:add()是添加一个新的元素... -
C++析构函数在对象数组,动态指针中使用
2018-07-25 11:56:491、完成对象被删除前的的一些清理工作; 2、在对象生存周期结束之后系统会自动调用析构函数,然后释放此对象的空间; 3、如果程序没有声明构造函数,系统会默认自动产生一个隐含的构造函数; 4、析构函数只能有一... -
C#删除动态数组,按条件留下待选数组元素
2011-03-14 17:32:00/* * * mainTab是TabControl的一个实例 * 实现功能:关闭除此之外的TabPage对象 */ /* * 方法一 * 删除动态数组的时候,下标由大到小删除 */... -
js 判断对象数组中是否包含某个属性的值和对象转化成数组
2017-05-22 15:49:46工作中遇到一个问题就是要动态给数组是对象中添加或者删除某个数组,,本来想用for循环的但是这样就会有一个bug就是每次都会添加,,最后只能使用indexOF var a =[{"name":"1111"},{"name":"222"}] console.log... -
ElementUI中的el-table怎样实现绑定对象数组时每一列不同控件的动态数据绑定
2020-08-05 16:26:27ElementUI中的el-table中实现动态添加一行、删除一行、清空所有行: https://mp.csdn.net/console/editor/html/107815187 上面实现的效果如下 其中每一行都是动态添加的,每一行对应的是一个对象,每一列... -
Java动态数组
2018-07-18 10:38:44Java动态数组是一种可以任意伸缩数组长度的对象,在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基础回顾-对象数组篇
2016-03-13 17:49:10Js对象 对象中包含一系列属性,js中除了基本类型...对象结构属性可动态添加和删除 delete obj.z -》 属性具有属性标签及get/set方法 原型 会沿着原型链一直往上找 class 对象属于哪一个种类 extensible 是否允许新增属 -
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2020-10-18 12:11:54主要介绍了JavaScript数组,JSON对象实现动态添加、修改、删除功能,结合实例形式分析了JavaScript针对json数组的添加、删除、修改操作实现技巧,需要的朋友可以参考下 -
python 数组 动态赋值_动态数组在Python中的实现
2021-01-28 21:59:09动态数组在python中,列表,集合和字典是可变对象。数字,字符串和元组是不可变的对象。可变对象意味着我们从列表,集合或字典中添加/删除项目,但是对于不可变对象(例如元组或字符串)而言,情况并非如此。在python... -
JAVA实现动态数组(MyArray)面向对象思维
2019-07-10 15:15:28基于面向对象思维(封装)实现一个动态数组(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:00Java动态数组是一种可以任意伸缩数组长度的对象,在Java中比较常用的是ArrayList,ArrayList是javaAPI中自带的java.util.ArrayList。下面介绍一下ArrayList作为Java动态数组的用法。 1.语法:add()是添加一个新的... -
接收对象数组_面向对象编程从小白到王者系列-通讯录终结篇(源码)
2021-01-08 20:18:11我们一起做的通讯录在上一篇的文章中已经可以动态添加联系人了,但是还不能根据动态添加的联系人进行查询、修改和删除。今天我们就一起把剩下的功能全部都实现了,因为有了之前写添加的经验,我们接下来写查询、修改...
-
MySQL Router 实现高可用、负载均衡、读写分离
-
第一章网络通信基础.mht
-
保持优质和提升价值是核心要素,新手小白,做好自媒体要做的三点
-
1774.最接近目标价格的甜品成本
-
三面腾讯,七面阿里,拿下25k*16offer,大厂面经复盘
-
leetcode【每日一题】303. 区域和检索 - 数组不可变
-
MySQL 数据库权限管理(用户高级管理和精确访问控制)
-
升级驱动update-kernel-4.17
-
PxCook.zip
-
自动化测试Python3+Selenium3+Unittest
-
精通编译Makefile,Nina, 从底层uboot到Android
-
计算器 - Java语言编写.rar
-
升级docker中的Chrome浏览器
-
源于现实的数字孪生技术在智慧交通领域有怎样的应用.docx
-
Amoeba 实现 MySQL 高可用、负载均衡和读写分离
-
基于电商业务的全链路数据中台落地方案(全渠道、全环节、全流程)
-
laravel-admin:form表单树状复选框组件(CheckboxTree).rar
-
最简单的DRM应用程序 (plane-test)
-
年后面试阿里,直接给我发Java后端岗offer了,只因我往简历里多写了“这行字”
-
SQLite相关dll