首先我要知道一点 其能够数据变化的 都用{{}}来进行渲染类似
来看一下实现效果
实现思路 ：
1，引进 vue.js
2,setup 将声明变量 方法放在setup里面
3，用响应式声明 ref（） 或rective声明 可以声明对象等等 let 也可以声明 但是 不可以与页面响应
4，渲染 加价减价
<td><button class="commodity_redu" @click="item.num--" v-show="item.num>0">-</button><span>{{item.num}}</span><button
@click="add_numj(item)" class="add_plus">+</button></td>vue代码
我们可以写在行内 @click=“item.num--”
这里的 item是我们用v-for 循环过了 所以说item是第一项 v-for的写法：
v-for=“item in list” ：key=“item.id”
list是我们声明的数组
5，数量的计算： 可以使用for循环 也可以使用 reduce（）的方法
看
let all_num = () => {
let num = 0
appu.value.forEach(item => {
num += item.num })
return num
}
这里是数量计算
6，价格的计算：
// 价格计算
let all_price = () => {
return appu.value.reduce((a, b) => a.num * a.price + b.num * b.price);
}
这样写还可以简写 将括号 花扩号去除掉
看完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
table {
min-width: 66%;
border-left: 1px solid lightgray;
border-top: 1px solid lightgray;
border-right: 1px solid lightgray;
text-align: center;
margin-left: 200px;
}
.add_plus{
width: 20px;
}
.add_commodity{
margin-left: 200px;
}
.edi_box{
margin-left: 200px;
}
.commodity_redu {
width: 20px;
}
.edi_ediitor{
margin: 5px;
}
/* 延迟缓慢 */
[v-cloak] {
display: none;
}
#ggid{
margin-left: 200px;
}
.active{
background-color: aquamarine;
}
</style>
</style>
<body>
<div id="app" v-cloak>
{{ message }}
<div>{{name}}</div>
<!--
<div :style="{color:tru?'#ff0000':''}">判断三元是否为true判断</div>
<input type="text" v-model="name"> -->
<!-- <div v-for="(it,index) in appu":key="index">{{it.id}}{{it.name}} -->
<!-- key的属性 -->
<!-- <input type="text" name="" id=""> -->
<!-- 头部删除 -->
<!-- <button @click="appu.shift()">删除</button> -->
<!-- </div> -->
<!-- if，else -->
<!-- <div v-if="tru"> -->
<!-- <input type="text" v-model=""> -->
<!-- </div> -->
<!-- <div v-else="tru">为false显示</div> -->
<!-- show -->
<!-- <div v-show="tru">show的方法使用的是display：none</div> -->
<!-- <button @click="tru=!tru">显示</button> -->
<!-- <button @click="tru=!tru">隐藏</button> -->
<!-- 数量 -->
<table border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<td>商品</td>
<td>价格</td>
<td>数量</td>
<td>操作</td>
</tr>
</thead>
<!-- 循环 -->
<tbody>
<tr v-for="(item,index) in appu " :key="item.id" :style="{'background-color':item.num>0?'#00ff00':''}">
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td><button class="commodity_redu" @click="item.num--" v-show="item.num>0">-</button><span>{{item.num}}</span><button
@click="add_numj(item)" class="add_plus">+</button></td>
<td><button class="edi_ediitor" @click="edi_ieddou(item,index)">编辑</button><button @click="deletv(appu,index)" >删除</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td> </td>
<td>总价格:￥{{all_price()}}</td>
<td>总数量:￥{{all_num()}}</td>
<td></td>
</tr>
</tfoot>
</table>
<!-- 添加商品 -->
<button class="add_commodity" @click="addsp">添加商品</button>
<div v-if="tru" class="edi_box">
<input type="text" value="" v-model="sp">
<input type="text" value="" v-model="sl">
<button @click="yespush(appu,sp,sl)">确认</button>
<button @click="closet(appu,sp,sl)">取消</button>
</div>
<!-- 编辑 -->
<div v-show="bjtru" id="ggid">
<input type="text" name="" id="" v-model="edi_data.name">
<input type="text" name="" id="" v-model="edi_data.price">
<button @click="edi_save">确认</button>
<button @click="bjtru=!bjtru">取消</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.js"></script>
<script>
let {
createApp,
ref,
reactive
} = Vue;
createApp({
setup() {
// 数据
const appu = ref([{
id: 1,
name: '手机',
num: 0,
price: 30
},
{
id: 2,
name: '电脑',
num: 0,
price: 20
}
])
// 新增inputv-show
const tru = ref(false)
//编辑inputv-show
const bjtru = ref(false)
// 确认v-show
const grrp = ref(false)
// 数量计算
let all_num = () => {
let num = 0
appu.value.forEach(item => {
num += item.num
})
return num
}
// 价格计算
let all_price = () => {
return appu.value.reduce((a, b) => a.num * a.price + b.num * b.price);
}
// 显示新增显示
const addsp = () => {
tru.value = true
}
// 加数量
const add_numj = (item) => {
item.num++
grrp.value = true
console.log(item);
}
// kong
const edi_data = reactive({
id: 1,
name: '',
num: 0,
price: 0
})
const edi_index = ref('0')
// 编辑回显
const edi_ieddou = (item, index) => {
bjtru.value = true
Object.assign(edi_data, item)
edi_index.value = index
}
// 点击保存替换
let edi_save = () => {
appu.value[edi_index.value] = edi_data
bjtru.value = false
}
// 删除
const deletv = (appu, i) => {
appu.splice(i, 1)
}
// 点击取消
// const sp = ref('')
const closet = (appu, sp, sl) => {
tru.value = false
}
// 点击添加
const yespush = (appu, sp, sl) => {
console.log(appu);
tru.value = false
let obj = {
price: sl,
name: sp,
num: 1
}
appu.push(obj)
}
console.log(name)
return {
yespush,
closet,
deletv,
add_numj,
addsp,
tru,
bjtru,
grrp,
appu,
all_num,
all_price,
edi_ieddou,
edi_data,
edi_save
}
}
}).mount('#app')
</script>
</body>
</html>
