Vue實現簡單的購物車功能

時間 2019-12-13

標籤 vue 實現簡單購物車功能简体版

原文原文鏈接

前言

咱們在開發商城的過程當中，購物車功能師必不可少的一項，好比咱們如今比較流行的淘寶，天貓，京東，小米，拼多多，惟品會，噹噹網等知名商城。那麼是否想過本身開發一個購物車功能呢？咱們使用vue,angular均可以比較輕鬆的開發購物車這個功能。下面小編就帶您作一個簡單的購物車功能。javascript

本章目標

使用vue搭建簡單的購物車功能css

項目構建

引入vue.js文件，而後搭建靜態的json數組，渲染數據

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>使用vue實現簡單的購物車功能</title>
    </head>
    <body>
        <div id="shop-cart">
            <table border="1" cellspacing="0" cellpadding="0" width="800" style="margin: 0 auto;">
                <tr>
                    <th>編號</th>
                    <th>名稱</th>
                    <th>價格</th>
                    <th>數量</th>
                    <th>小計</th>
                    <th>操做</th>
                </tr>
                <tr v-for="(obj,index) of products">
                    <td>{{index+1}}</td>
                    <td>{{obj.name}}</td>
                    <td>{{obj.price}}</td>
                    <td>{{obj.count}}</td>
                    <td>{{obj.count*obj.price}}</td>
                    <td>
                        <button v-on:click="remove(index)">移除</button>
                    </td>
                </tr>
            </table>
        </div>
        <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm= new Vue({//構建一個vue實例
                el:'#shop-cart',    //指定須要掛載的元素
                data:{
                    products:[
                        {
                            _id:10001,
                            name:'apple',
                            price:11.5,
                            count:10,
                        },
                        {
                            _id:10002,
                            name:'banana',
                            price:12.5,
                            count:5,
                        },
                        {
                            _id:10003,
                            name:'pear',
                            price:6.5,
                            count:100,
                        },
                    ]
                },
                computed:{
                    
                },
                methods:{
                    remove:function(index){//移除的方法
                        if(confirm('你肯定要刪除嗎?')){
                            this.products.splice(index,1);
                        }
                    }
                }
                
            })
            
        </script>
    </body>
</html>

　　2.簡單的購物車功能咱們已經作出來了，下面咱們添加一些元素，好比數量可一加減，添加總價，隔行換色等等　　html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>使用vue實現簡單的購物車功能</title>
        <style type="text/css">
            .bg{
                background: lightblue;
            }
        </style>
    </head>
    <body>
        <div id="shop-cart">
            <table border="1" cellspacing="0" cellpadding="0" width="800" style="margin: 0 auto;">
                <tr>
                    <th>編號</th>
                    <th>名稱</th>
                    <th>價格</th>
                    <th>數量</th>
                    <th>小計</th>
                    <th>操做</th>
                </tr>
                <tr v-for="(obj,index) of products" v-bind:class="{bg:index%2==0}">
                    <td>{{index+1}}</td>
                    <td>{{obj.name}}</td>
                    <td>{{obj.price|currency(4)}}</td>
                    <td>
                        <button v-on:click="obj.count<=0?0:obj.count-=1">-</button>
                        <input type="text" v-model="obj.count" v-on:keyup="obj.count=obj.count<=0?0:obj.count"/>
                        <button v-on:click="obj.count+=1">+</button>
                    </td>
                    <td>{{obj.count*obj.price|currency(3)}}</td>
                    <td>
                        <button v-on:click="remove(index)">移除</button>
                    </td>
                </tr>
                <tr>
                    <td colspan="6" align="right">
                        {{total|currency(3)}}
                    </td>
                </tr>
            </table>
        </div>
        <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            
            Vue.filter('currency',function(v,n){
                if(!v){
                    return ""
                }
                return "￥"+v.toFixed(n||2);
                
            })
            let vm= new Vue({//構建一個vue實例
                el:'#shop-cart',    //指定須要掛載的元素
                data:{
                    products:[
                        {
                            _id:10001,
                            name:'apple',
                            price:11.5,
                            count:10,
                        },
                        {
                            _id:10002,
                            name:'banana',
                            price:12.5,
                            count:5,
                        },
                        {
                            _id:10003,
                            name:'pear',
                            price:6.5,
                            count:100,
                        },
                    ]
                },
                computed:{//計算屬性
                    total:function(){//計算總價的方法
                        let sum=0;
                        for(let i=0;i<this.products.length;i++){
                            sum+=parseFloat(this.products[i].price)*parseFloat(this.products[i].count)
                        }
                        return sum;
                    }
                },
                methods:{//方法
                    remove:function(index){//移除的方法
                        if(confirm('你肯定要刪除嗎?')){
                            this.products.splice(index,1);
                        }
                    }
                }
                
            })
            
        </script>
    </body>
</html>

　　到這裏咱們簡單的購物車功能已經實現了，如今是否以爲購物車這個功能很簡單呢？其實小編以爲也是，咱們作的是最簡單的購物車功能，若是您以爲本篇文章幫助到您，能夠點擊關注一下，你的讚美將是小編前進的動力。感謝支持。前端

總結

vue在咱們前端開發領域中帶來了許多的方便，固然angular也是一款很是不錯的前端框架，還有facebook公司發行的react，這前端三大主流框架中，小編比較喜歡vue，vue相對其它兩款框架來講比較容易上手和便捷，感興趣的同行均可以去嘗試一下。vue

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。