<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<hr />
<!-- 布局 -->
<ul>
<li v-for="(item, index) in lists" :key="index">
<input type="checkbox" v-model="item.flag" />
{{item.flag}}=== 商品名称:{{item.name}}=== 商品价格:{{item.price}}===
购买数量:
<input
type="button"
value="-"
@click="btnjian(index)"
:disabled="item.num <= 1"
/>
<input :style="active" type="text" v-model.number="item.num" />
<input type="button" value="+" @click="btnjia(index)" />
</li>
</ul>
总价: {{totle}}
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
msg: "Hello Vue",
lists: [
{ id: 1, flag: false, name: "nike", price: 100, num: 1 },
{ id: 2, flag: false, name: "adidas", price: 200, num: 2 },
{ id: 3, flag: false, name: "lining", price: 300, num: 3 },
],
// totle: 0,
active: {
color: "pink",
width: "15px",
height: "15px",
},
},
methods: {
btnjian(i) {
this.lists[i].num--;
},
btnjia(i) {
this.lists[i].num++;
},
// changeHandel() {
// this.totle = 0;
// this.lists.forEach((item, index) => {
// if (item.flag) {
// this.totle += item.price * item.num;
// }
// });
// },
},
computed: {
totle() {
var result = 0;
this.lists.forEach((item, index) => {
if (item.flag) {
result += item.price * item.num;
}
});
return result;
},
},
});
</script>
</body>
</html>
