uniapp点击按钮增加或者删除一行

发布于:2024-07-30 ⋅ 阅读:(117) ⋅ 点赞:(0)

<template>
	<view class="scenic-spot">
		<view class="cell-content cell-money">
			<view class="cell-name">拍摄取景地<text class="must">*</text></view>
		</view>
		<view class="scenic-spot-item" v-for="(item,index) in scenicSpotList" :key="index" @click="delScenicSpot">
			-
			<input v-model="item.scenicSpot" placeholder="请输入拍摄取景地" type="text" />
		</view>
		<view class="scenic-spot-item" @click="addScenicSpot">
			+
			<view class="add-scenic-spot">添加景点</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//景点列表
				scenicSpotList: [{
						scenicSpot: '三坊七巷'
					},
					{
						scenicSpot: '玉龙雪山'
					}
				],
			}
		},

		methods: {
			/** 点击添加 添加景点*/
			addScenicSpot() {
				this.scenicSpotList.push({
					scenicSpot: ''
				})
			},
			/**点击删除*/
			delScenicSpot() {
				if (this.scenicSpotList.length >= 1) {
					this.scenicSpotList.pop()
				}

			},
		}
	}
</script>
<style lang="scss" scoped>
	.scenic-spot {
		.scenic-spot-item {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #2297FF;
			padding: 26rpx 0;

			.add-scenic-spot {
				font-weight: 500;
				font-size: 28rpx;
				color: #2F2F2F;
			}
		}
	}
</style>


网站公告

今日签到

点亮在社区的每一天
去签到