1.vue案例（包含删除，新增，和回车，点击事件）
javascript
复制代码
<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案例（包含删除，新增，和回车，点击事件）
javascript
复制代码
<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使用方法）
javascript
复制代码
<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>