主要是对基础的指令的使用，直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
table {
width: 500px;
text-align: center;
border-collapse: collapse;
}
table,
th,
td {
border: 3px double black;
}
input{
width: 120px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.js"></script>
</head>
<body>
<div id="falsebody">
<table id="tableBox" cellspacing="0" cellpadding="9">
<tr>
<td>名称</td>
<td>价格</td>
<td>数量</td>
<td>操作</td>
</tr>
<tbody>
<tr v-for="(item,index) in goods" @click="changeColor(index)"
:style="{backgroundColor: k != index ? '' : '#0078D4'}">
<td>{
{item.name}}</td>
<td>￥{
{item.price}}</td>
<td>
<button type="button" @click="redruce(index)">-</button>
{
{item.num}}
<button type="button" @click="plus(index)">+</button>
</td>
<td>
<button type="button" @click="editBlock(item,index)">编辑</button>
<button type="button" @click="del(index)">删除</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>总价:￥{
{allPrice}}</td>
<td>总数量:{
{allNum}}</td>
<td></td>
</tr>
</tfoot>
</table>
<button type="button" @click="addBlock()">添加商品</button>
<div v-show="addShow">
<input v-model="name" type="text" name="" value="" placeholder="名称" />
<input v-model="price" type="number" name="" value="" placeholder="价格" />
<input v-model="num" type="number" name="" value="" placeholder="数量" />
<button type="button" @click="addSure()">确定</button>
<button type="button" @click="addCancel()">取消</button>
</div>
<div v-show="editShow">
<input v-model="editname" type="text" name="" />
<input v-model="editprice" type="number" name="" />
<input v-model="editnum" type="number" name="" />
<button type="button" @click="editSure()">确定</button>
<button type="button" @click="editCancel()">取消</button>
</div>
</div>
<script>
let { createApp, ref, reactive } = Vue;
createApp({
setup() {
//假数据
const goods = ref([
{
"name": "衣服",
"price": 39,
"num": 1
},
{
"name": "鞋子",
"price": 69,
"num": 1
}
])
//减少商品数量
function redruce(i) {
goods.value[i].num--;
// 不能减到负数
if (goods.value[i].num <= 0) {
goods.value[i].num = 0;
}
calculation();
}
//增加商品数量
function plus(i) {
goods.value[i].num++;
calculation();
};
// 声明一个变量计算总价
let allPrice = ref(0);
// 声明一个变量计算总数量
let allNum = ref(0);
calculation();
//计算总价格和总数量
function calculation() {
allPrice.value = 0;
allNum.value = 0;
for (let i in goods.value) {
allPrice.value += goods.value[i].num * goods.value[i].price;
allNum.value += goods.value[i].num;
};
};
// 默认隐藏添加输入框
let addShow = ref(false);
// v-model添加 获取输入框输入的新数据
let name = ref('');
let price = ref('');
let num = ref('');
//点击添加
function addBlock() {
name.value = '';
price.value = '';
num.value = '';
addShow.value = true;
};
//点击确定添加
function addSure() {
// 判断不为空
if (name.value != '' && price.value != '' && num.value != '') {
// 添加的新数据
let newData = {
name: name.value,
price: price.value,
num: num.value
};
goods.value.push(newData);
addShow.value = false;
calculation();
};
};
//点击取消添加
function addCancel() {
name.value = '';
price.value = '';
num.value = '';
addShow.value = false;
};
// v-model编辑 更改元数据
let editname = ref('');
let editprice = ref('');
let editnum = ref('');
//编辑的默认数据
let defaultData = reactive(
{
editname: '',
editprice: '',
editnum: ''
}
);
//默认隐藏编辑输入框
let editShow = ref(false);
let index;// 接收点击编辑时传的下标
//点击编辑按钮
function editBlock(item, i) {
Object.assign(defaultData, item);
editname.value = item.name;
editprice.value = item.price;
editnum.value = item.num;
index = i;
editShow.value = true;
};
//点击确定编辑
function editSure() {
goods.value[index].name = editname.value;
goods.value[index].price = editprice.value;
goods.value[index].num = editnum.value;
calculation();
editShow.value = false;
};
//点击取消编辑
function editCancel() {
editShow.value = false;
};
//点击删除
function del(i) {
goods.value.splice(i, 1);
editShow.value = false;
calculation();
};
//点击商品操作时改变背景颜色
let k = ref();
//点击换色
function changeColor(i) {
k.value = i;
};
return {
goods,
allNum,
allPrice,
redruce,
plus,
name,
num,
price,
addShow,
addBlock,
addSure,
addCancel,
editShow,
defaultData,
editname,
editprice,
editnum,
editBlock,
editSure,
editCancel,
del,
k,
changeColor
}
}
}).mount('#falsebody');
</script>
</body>
</html>
原文链接: https://blog.csdn.net/hexadecimal_001/article/details/140076954