需要实现的功能：
代码如下：
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">名称</th>
<th scope="col">单价<button @click="asc = true">↑</button><button @click="asc = false">↓</button></th>
<th scope="col">数量</th>
<th scope="col">合计</th>
</tr>
</thead>
<tbody>
<tr v-for="(x, i) in list">
<td>{{ x.name }}</td>
<td>{{ x.price }}</td>
<td>
<button @click="reduce(x, i)">-</button>
{{ x.num }}
<button @click="increace(x, i)">+</button>
</td>
<td>{{ x.num * x.price }}</td>
</tr>
</tbody>
</table>
<Br>
<p >总金额：{{ all }}</p>
<hr>
<div>
<input type="checkbox" id="checkbox" v-model="checked">
<span>使用8折优惠卷:-{{ checked ? all * 0.2 : 0}}
<hr>
<strong>合计：</strong>{{ checked ? all * 0.8 : all }}
<hr>
</span>
</div>
<div>
<form @submit.prevent="submit">
<input v-model="msg.name" placeholder="请输入商品名">
<input v-model="msg.price" placeholder="请输入单价">
<input type="submit" value="添加商品">
</form>
</div>
</div>
<script>
var model={
info: [{
name: "iphone7",
price: 6000,
num: 1,
total: 6000
}, {
name: "荣耀6x",
price: 1200,
num: 1,
total: 1200
}, {
name: "dell笔记本",
price: 4000,
num: 1,
total: 4000
}],
//优惠卷
checked:false,
//添加商品
msg: {},
//排序
asc: false
}
var vm = new Vue({
el: "#app",
data: model,
computed: {
//商品总价
all() {
let total = 0;
for (let index = 0; index < this.info.length; index++) {
const {num, price} = this.info[index]
total += num * price
}
return total
},
//升序降序
list() {
if (!this.asc) {
return this.info.sort((a,b)=>b.price - a.price)
} else {
return this.info.sort((a,b)=>a.price - b.price)
}
}
},
methods: {
reduce: function(x, i) {
// this.info[i].num = x.num - 1
if(x.num>0){
x.num = x.num - 1
}
},
increace: function(x, i) {
// this.info[i].num = x.num + 1
x.num = x.num + 1
},
submit: function() {
//添加的方法（子类推送到父类）
vm.info.push({
name: this.msg.name,
price: this.msg.price,
num: 1,
total:this.msg.price
});
this.msg={ name:'',price:''}
}
}
})
</script>
</body>
</html>
网友评论