vue+uni-app案例

1.vue案例（包含删除，新增，和回车，点击事件）

<template>
  <div>
    <h1>Todo List</h1>
    <input v-model="newItem" placeholder="Add new item" @keyup.enter="addNewItem()" />
    <button @click="addNewItem">Add Item</button>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }}
        <button @click="removeItem(index)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const items = ref([
  'Learn Vue',
  'Build something awesome',
  'Profit!',
]);
const newItem = ref('');
function addNewItem() {
  items.value.push(newItem.value);
  newItem.value = '';
}
function removeItem(index) {
  items.value.splice(index, 1);
}
</script>

---

2.uni-app案例（包含删除，新增，和回车，点击事件）

<template>
	<view class="out">
		<view class="top">
			<h1>近期热搜</h1>
		</view>
		<view class="body">
			<view class="forBody" v-for="(item,index) in titles" :key="item.id">
				<view class="textBody">
					<span class="title">{{index+1}}.</span>
					<span class="text">{{item.name}}</span>
					<span class="del" @click="del(index)">删除</span>
				</view>
			</view>
			<view class="num">共{{titles.length}}条热搜</view>
		</view>
		<view class="buttom">
			<input type="text" auto-focus="true" v-model="text" class="tex" placeholder="请输入热搜" @confirm="insert()">
			<button class="bton" @click="insert"><span class="btonText">添加</span></button>
			<button @click="remover()"><span>清空</span></button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	var remover = () => {
		titles.value=[]
	}

	var titles = ref([{
			id: 1,
			name: '老王被抓了??'
		},
		{
			id: 2,
			name: '日本被灭了'
		},
		{
			id: 3,
			name: '山中无老虎,台湾称王??'
		},
		{
			id: 4,
			name: '台湾回归?'
		},
		{
			id: 5,
			name: '重生之新一是首富??'
		},
		{
			id: 6,
			name: '早恋被逮到了??'
		}
	])
	var del = (index) => {
		console.log(index);
		titles.value.splice(index, 1)
	}
	var i = titles.value.length + 1;
	var insert = () => {
		console.log(text);
		titles.value.push({
			name: text.value,
			id: i
		})
		i++;
		text.value = ''
	}
	var text = ref('');
</script>

<style>
	.top {
		text-align: center;
		font-size: 30px;
		margin-bottom: 20px;
	}

	.buttom {
		margin-top: 5px;
		text-align: center;
	}

	.textBody {
		margin: auto;
		width: 80%;
		height: 30px;
		border-bottom: 1px solid red;
		position: relative;
	}

	.del {
		position: absolute;
		right: 20px;
		color: blue;
	}

	.num {
		margin-top: 5px;
		text-align: center;
	}

	.tex {
		display: inline-block;
		width: 60%;
		height: 30px;
		border: 1px solid gray;
	}

	.bton {
		display: inline-block;
		width: 30%;
		height: 30px;
		line-height: 30px;
		color: aliceblue;
		background-color: red;
	}
</style>

3. uni-ap计算案例（computed 案例，以及checkbox-group使用方法）

<template>
	<view class="body">
		<checkbox-group @change="itemChange">
			<!-- 遍历数据项，生成可选择的项 -->
			<view class="forBody" v-for="(item) in data" :key="item.id">
				<view class="item">
					<!-- 显示数据项的id、名称和价格 -->
					<span class="span">{{item.id}}</span>
					<span class="span">{{item.name}}</span>
					<span class="span">{{item.price}}</span>
					<!-- 包含选择框，其值为数据项的价格 -->
					<span class="span">
						<checkbox :value="item.price"></checkbox>
					</span>
				</view>
			</view>
		</checkbox-group>
		<!-- 显示总价 -->
		{{sumPrice}}
	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue';

	// 定义数据数组，包含id、名称和价格，初始全选状态
	var data = ref([{
			id: 1,
			name: '苹果',
			price: '100',
			check: true
		},
		{
			id: 2,
			name: '华为',
			price: '200',
			check: true
		},
		{
			id: 3,
			name: 'poop',
			price: '300',
			check: true
		}, {
			id: 4,
			name: 'vivo',
			price: '400',
			check: true
		},
	]);

	// 用于存储用户选择的项的价格
	var checkItem = ref([]);

	// 计算总价，基于用户选择的项
	var sumPrice = computed(() => {
		let sum = 0;
		// 遍历数据项，检查是否被选中，如果选中则累加价格
		data.value.forEach(item => {
			if (checkItem.value.indexOf(item.price) > -1) {
				sum += parseInt(item.price)
			}
		})
		return sum;
	});

	// 处理选择事件，更新用户选择的数据
	var itemChange = (e) => {
		checkItem.value = e.detail.value
	}
</script>

<style scoped lang="scss">
	// 设置每个数据项显示内容之间的间距
	.span {
		margin-right: 20px;
	}
</style>