VUE 实战 购物车小案例

 

 如图所示，首先数据源来至于JSON  ，自己去导即可：

文件分布分为3部分  html vue代码 和 c3样式

 

提示 关于表格遍历你可以这样写：

        <tr v-for="item in books">
                <td v-for="i in item">{{i}}</td>
            </tr>

但是这样的遍历 仅此适用于直接显示【因为图中 有加按钮 和 其他字符 所以不适合这样】，一般都是这样下面这样：【下面为最终完全代码】

 

先弄样式：store.css:

table{
    border: 1px coral solid;
    border-collapse: collapse;
    border-spacing: 0;
}

th,td{
padding: 8px 16px;
border: 1px solid coral;
    text-align: left;
}

th{
    background-color: #f7f7f7;
    color: black;
    font-weight: 600;
}

 

然后VUE代码：

store.js:

const app = new Vue({
    el: "#app",
    data: {
        //books：JSON格式数据
        books: [
            {
                id:1,
                name:"《JavaScript入门到入土》",
                date:"2020-12-12",
                price:59.00,
                count:1
            },
            {
                id:2,
                name:"《JQuery入门到放弃》",
                date:"2019-05-23",
                price:44.00,
                count:1
            },
            {
                id:3,
                name:"《VUE 初始到初犯》",
                date:"2020-03-06",
                price:125.00,
                count:1
            },
            {
                id:4,
                name:"《HTML5入门到入坟》",
                date:"2018-02-03",
                price:66.00,
                count:1
            },
            {
                id:5,
                name:"《CSS3 重新开始到裂开》",
                date:"2021-05-05",
                price:30.50,
                count:1
            },
        ],

    },
    methods:{
        //显示价钱 保留两位小数
        showPrice(value){
            return '￥' + value.toFixed(2)
        },
        //添加书的数量
        addCount(index){
            this.books[index].count++;
        },
        //减少书的数量
        subCount(index){
            this.books[index].count--;
        },
        //移除商品
        RemoveHandle(index){
            this.books.splice(index,1);
        }
    },
    computed:{
        totalPrice(){
            let sum = 0;
            for (let i = 0; i < this.books.length; i++) {
                sum += this.books[i].price * this.books[i].count;
            }
            return sum.toFixed(2);
        }
    }
})

其次 H5 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link rel="stylesheet" href="c3/store.css">
</head>
<body>

<div id="app">
 <div v-if="this.books.length != 0">
     <table>
         <!--   表头     -->
         <thead>
         <tr>
             <th>id</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>{{showPrice(item.price)}}</td><!--这里直接用方法保留两位小数-->
             <td>
                 <button @click="subCount(index)" :disabled="item.count <= 1">-</button> <!--善用条件 来判断是否为1 是的话按钮禁止-->
                 {{item.count}}
                 <button @click="addCount(index)">+</button>
             </td>
             <td>
                 <button @click="RemoveHandle(index)">移除</button>
             </td>
         </tr>
         </tbody>
     </table>
     <h2>总价钱：{{totalPrice}}</h2>
 </div>
    <p v-else>您的购物车为空！</p>
</div>


<script src="js/vue.js"></script>
<script src="js/store.js"></script>
</body>
</html>

 

 

案例总结：

1.其实里面有些东西可以用到过滤器，但是我这个VUE没有过滤器这个东西，所以呢就没用，过滤器可以自己去了解了解即可，

2.最顶部的内个if else  是做一个空判断的，为空就显示您的购物车为空

3.总价钱用的是for循环，其实可以升级一下  for of 循环的

4.关于遍历表格 v-for ，因为有些表格有其他按钮什么的 所以用这种，如果光是遍历 可以用最上面内种.

5.移除内个操作 ，其实直接用万能方法 splice 即可.

6.其实多用内些语法糖绑定 + 表达式，因为超级好用

7.善用内个 index （v-for） 的index

8.多练多用多记

posted @ 2021-07-07 19:55  咸瑜  阅读(185)  评论(0)  编辑  收藏  举报