文章内容
1623902330
Vue实现简易购物车案例
本文实例为大家分享了Vue实现简易购物车的具体代码，供大家参考，具体内容如下
先来看一下完成后的效果吧。
CSS 部分
这里没什么好说的，就是v-cloak 这一个知识点
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | table{ border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0;}th,td{ padding: 8px 16px; border: 1px solid #e9e9e9; text-align: center;}th{ background-color: #f7f7f7; color: #5c6b77; font-weight: 600;}[v-cloak]{ display: none;} |
HTML部分
这里说明一些用到的一些Vue的知识点:
- v-if
- v-for
- v-cloak
- v-on > @
- v-bind > :
- 方法 methods
- 计算属性 computed
- 过滤器 filters
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>购物车</title> <link rel="stylesheet" href="style.css" ></head><body> <div id="app" v-cloak> <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"> <th>{{item.id}}</th> <th>{{item.name}}</th> <th>{{item.date}}</th> <!--方案一 保留小数点和货币符号--> <!-- <th>{{"￥"+item.price.toFixed(2)}}</th> --> <!--方案二--> <!-- <th>{{getFinalPrice(item.price)}}</th> --> <!--方案三--> <th>{{item.price | showPrice}}</th> <th> <button @click="decrement(index)" :disabled="item.count<=0">-</button> {{item.count}} <button @click="increment(index)">+</button> </th> <th><button @click="removeHandle(index)">移除</button></th> </tr> </tbody> </table> <h2>总价格:{{totalPrice | showPrice}}</h2> </div> <h2 v-else> 购物车为空
*
|