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>
