uniapp实现动态增删元素
<template><view><view class="item-box" v-for="(item, index) in list"><input type="text" placeholder="请输入"><button type="warning" @click="delItem(item)">删除</button>&
·
<template>
<view>
<view class="item-box" v-for="(item, index) in list">
<input type="text" placeholder="请输入">
<button type="warning" @click="delItem(item)">删除</button>
</view>
<button type="primary" @click="addItem">新增</button>
<button type="primaray" @click="submitBtn">提交</button>
</view>
</template>
<script>
export default {
data() {
return {
id: 1,
list: [
{
id: 1
}
]
}
},
methods: {
addItem() {
let add = {
id: parseInt(this.id)+1
}
this.list.push(add)
this.id = parseInt(this.id)+1
},
delItem(item) {
if (item.id == 1) {
uni.showToast({
title: '不能删除第1个',
icon: 'none'
})
return false;
}
this.list = this.list.filter((i) => {
return i != item
})
},
submitBtn() {
console.log(this.list)
}
}
}
</script>
<style>
.item-box{
display: flex;
}
</style>
更多推荐
已为社区贡献14条内容
所有评论(0)