JS----push和slice实现点击添加、删除

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双向绑定，页面上少一条数据。