学习Vue(购物车界面小案例)

mood:

今天心情还不错,老早就醒了,很有精神。

跟着老师做一个简易购物车案例

搭建界面,数据是自己写死的,放在Vue的data中,数组中包含对象,创建简单的ul >li 后使用 v-for把数据遍历出来放到表格(table)中,再加入功能按钮,最后用v-if设置一个当购物车界面数据清零时显示购物车为空。

(在把数据写入data中时,一直在数组最上方有报错(TS1005 (JS) 应为“,”.)百度说是
vscode自身语法检查有问题,解决方案我在CSDN看的这位大哥的https://blog.csdn.net/Alex_ddC/article/details/111479662
很详细,改一个设置就可以了)

 <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='increment(index)'>+</button>
                        </td>
                        <td><button @click="removeHandle(index)">移除</button></td>
                    </tr>

如图


image.png

对加减功能、移除功能按钮进行绑定点击事件

 increment(index){
                    // console.log(111111)
                    this.books[index].count++
                },
                decrement(index){
                    this.books[index].count--
                },
                removeHandle(index){
                    this.books.splice(index,1)
                }

最后再计算属性computed中写出求总价格的方法

 totalPrice(){
                  let totalPrice = 0
                  for (let i = 0; i < this.books.length; i++) {
                    totalPrice += this.books[i].price*this.books[i].count;
                      
                  }
                  return totalPrice
              }  

然后就OK了。今天学的依旧只有一点点,明继续加油!!

`

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。

推荐阅读更多精彩内容