1 Star 0 Fork 0

nekodeng / Vue-practice-demo-案例汇总

Create your Gitee Account
Explore and code with more than 8 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Please pay attention to the specific project description and its upstream code dependency when using it.
Clone or Download
index.html 3.80 KB
Copy Edit Web IDE Raw Blame History
nekodeng authored 2021-01-23 17:49 . update 02-shoppingcart/index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue练习02-购物车案例</title>
<style>
table {border: 1px solid #e9e9e9;border-collapse: collapse;border-spacing: 0;}
th, td {padding: 8px 16px;border: 1px solid #e9e9e9;text-align: left;}
th {background-color: #f7f7f7;color: #5c6b77;font-weight: 600;}
</style>
</head>
<body>
<div id="app">
<div v-if="books.length">
<table>
<thead>
<tr>
<th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>{{item.price | showprice}}</td>
<td>
<button @click="decrement(index)" :disabled="item.count <= 1">-</button>
{{item.count}}
<button @click="increament(index)">+</button>
</td>
<td><button @click="removeHandle(index)">删除</button></td>
</tr>
</tbody>
</table>
<h4>总价格:{{totalPrice | showprice}}</h4>
</div>
<div v-else>购物车为空</div>
</div>
<!--<script src="../vue.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue ({
el: '#app',
data: {
books: [
{
id: 1,
name: '代码大全',
price: 89.02,
date: '2005/10/02',
count: 2
},
{
id: 2,
name: 'Js基础',
price: 60.22,
date: '2006/02/20',
count: 1
},
{
id: 3,
name: 'html基础',
price: 59.3,
date: '2015/05/12',
count: 4
},
{
id: 4,
name: 'css基础',
price: 39.09,
date: '2003/12/15',
count: 5
},
{
id: 5,
name: 'vue进阶',
price: 29.54,
date: '2006/02/27',
count: 3
}
]
},
methods: {
// getFinalPrice(price){
// return '¥'+price.toFixed(2)
// }
increament(index){
this.books[index].count++
},
decrement(index){
this.books[index].count--
},
removeHandle(index){
this.books.splice(index,1)
}
},
computed: {
// 计算总价格函数
totalPrice(){
// let totalPrice = 0
// 1.普通的for循环方式
// for(let i=0; i < this.books.length; i++){
// totalPrice += this.books[i].price * this.books[i].count
// }
// return totalPrice
// 2.for in 方式
// for (let i in this.books){
// totalPrice += this.books[i].price * this.books[i].count
// }
// return totalPrice
// }
// 3.for of 方式
// for (let item of this.books){
// totalPrice += item.price * item.count
// }
// return totalPrice
// }
// 4.reduce高阶函数方法
return this.books.reduce(function(pre,n){
return pre + n.price * n.count
},0)
}
},
filters: {
// 使用过滤器
showprice(price){
// 使得价格保留两位小数
return '¥ '+price.toFixed(2)
}
}
})
// 补充:函数式编程(第一公民:函数)
//三个高阶函数:filter/map/reduce
</script>
</body>
</html>

Comment ( 0 )

Sign in to post a comment

1
https://gitee.com/nekodeng/vue-practice-demo-case-summary.git
git@gitee.com:nekodeng/vue-practice-demo-case-summary.git
nekodeng
vue-practice-demo-case-summary
Vue-practice-demo-案例汇总
master

Search