HTML:
<template>
<view class="">
<view class="" v-for="(item,index) in list" :key="index" style="width: 100%;height: 300rpx;background-color: #00C545;">
<view class="" style="width: 100%;height: 100rpx;background-color: #aaffff;">
<view class="" @click="del(index)">
<text>删除</text>
</view>
</view>
</view>
<button type="default" @click="add" style="position: fixed;bottom: 0;">点击+1</button>
</view>
</template>
JS:
<script>
export default {
data() {
return {
list:[0],
n:0
}
},
methods:{
add(){
this.n=this.n+1
this.list.push(this.n)
if(this.list.length>=4){
this.list.pop()
uni.showToast({
title:'不能再加',
icon:'none'
})
}
},
del(index){
if(this.list.length<=1){
uni.showToast({
title:'不能再删了',
icon:'none'
})
console.log(this.list)
}else {
this.list.splice(index,1)
}
}
}
}
</script>
核心:
声明新数组,默认长度1
每次点击添加,push新元素进去,长度就会+1,页面上就多一列数据
del时,splice会删除当前index的1位元素,同时基于VUE双向绑定,页面上少一条数据。