|
|
|
|
@ -1,2 +1,123 @@
|
|
|
|
|
# qweq123
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>Title</title>
|
|
|
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
|
|
|
<style>
|
|
|
|
|
.brand{
|
|
|
|
|
width: 600px;
|
|
|
|
|
margin:0 auto;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
td,th{
|
|
|
|
|
border: 1px solid;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="app">
|
|
|
|
|
<div class="brand">
|
|
|
|
|
<div class="brand">
|
|
|
|
|
<h2>商品信息表</h2>
|
|
|
|
|
<table>
|
|
|
|
|
<tr>
|
|
|
|
|
<th style="width: 30px;">ID</th><th style="width: 180px;">书名</th>
|
|
|
|
|
<th style="width: 150px;">出版社</th><th style="width: 60px;">价格</th>
|
|
|
|
|
<th style="width: 60px;">数量</th><th style="width: 80px">金额</th>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr v-for="(item,index) in books" :key="index">
|
|
|
|
|
<td>{{item.id}}</td>
|
|
|
|
|
<td>{{item.name}}</td>
|
|
|
|
|
<td>{{item.press}}</td>
|
|
|
|
|
<td>{{(item.price*0.8).toFixed(2)}}</td>
|
|
|
|
|
<td>
|
|
|
|
|
<button @click=sub(index)>-</button>
|
|
|
|
|
<input type="text" style="width: 20px" v-model="item.count">
|
|
|
|
|
<button @click=add(index)>+</button>
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
{{(item.price*item.count).toFixed(2)}}
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr><td colspan="5">合计：</td><td>{{totaAmount.toFixed(2)}}</td></tr>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
Vue.createApp({
|
|
|
|
|
data(){
|
|
|
|
|
return{
|
|
|
|
|
books:[
|
|
|
|
|
{
|
|
|
|
|
id: 1,
|
|
|
|
|
name: "PHP程序设计",
|
|
|
|
|
press: "清华大学出版社",
|
|
|
|
|
price: 49,
|
|
|
|
|
count:3
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 2,
|
|
|
|
|
name: "Laravel框架开发",
|
|
|
|
|
press: "清华大学出版社",
|
|
|
|
|
price: 36,
|
|
|
|
|
count:4
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 3,
|
|
|
|
|
name: "微信小程序开发技术",
|
|
|
|
|
press: "人民邮电出版社",
|
|
|
|
|
price: 58,
|
|
|
|
|
count:3
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 4,
|
|
|
|
|
name: "Vue.js开发技术",
|
|
|
|
|
press: "高等教育出版社",
|
|
|
|
|
price: 48,
|
|
|
|
|
count:5
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods:{
|
|
|
|
|
//同类图书的金额
|
|
|
|
|
salesPrice(p){
|
|
|
|
|
//编写代码 2：
|
|
|
|
|
//toFixed(2)可以保留两们小数
|
|
|
|
|
p.toFixed(2)
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
add(index){
|
|
|
|
|
//编写代码 3：
|
|
|
|
|
if (this.books[index].count < 10) {
|
|
|
|
|
this.books[index].count++;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
sub(index){
|
|
|
|
|
//编写代码4：
|
|
|
|
|
if (this.books[index].count > 0) {
|
|
|
|
|
this.books[index].count--;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
computed:{
|
|
|
|
|
//所有图书的总金额
|
|
|
|
|
totaAmount(){
|
|
|
|
|
//编写代码 5：
|
|
|
|
|
return this.books.reduce((total, book) => total + (book.price * book.count), 0);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}).mount('#app')
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
