<!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>
* {
list-style: none;
text-align: center;
}
img {
width: 300px;
height: 150px;
}
table {
width: 1000px;
border-collapse: collapse;
}
input {
width: 20px;
}
</style>
<body>
<div id="app">
<table border=1>
<tr>
<th>编号</th>
<th>名称</th>
<th>图片</th>
<th>价格</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr v-for="(item,i) in list">
<!--循环-->
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td><img :src="item.img" alt=""></td>
<td>{{item.price.toFixed(2)}}</td>
<td>
<button :disabled="item.count === 1" @click="item.count--">-</button>
<input type="text" v-model="item.count" @input="checkVal($event,item)">
<!--表单-->
<button :disabled="item.count === 10" @click="item.count++">+</button>
</td>
<td>{{(item.price * item.count).toFixed(2)}}</td>
<td><button @click="remove(i)">删除</button></td>
<!--绑定方法-->
</tr>
</table>
<h1>
总价：{{totalPrice}}
</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
computed: { //监控自己定义的变量
totalPrice() {
let total = 0
this.list.forEach(r => {
total += r.price * r.count
});
return total.toFixed(2)
},
},
data() {
return {
list: [
{
id: 1,
name: "111",
img: "./images/lunbo1.jpg",
price: 1000,
count: 1
},
{
id: 2,
name: "222",
img: "./images/lunbo2.jpg",
price: 2000,
count: 1
},
{
id: 3,
name: "333",
img: "./images/lunbo3.jpg",
price: 3000,
count: 1
},
{
id: 4,
name: "444",
img: "./images/lunbo4.jpg",
price: 4000,
count: 1
},
]
}
},
methods: { //=onload
checkVal(e, item) {
let { value } = e.target
if (isNaN(value)) item.count = 1
value = parseInt(value)
if (value > 10) item.count = 10
if (value < 1) item.count = 1
},
remove(i) {
if (confirm("确定删除?"))
this.list.splice(i, 1)
},
},
})
</script>
</body>
</html>
