使用Vue2實現(xiàn)簡單的購物車功能(可直接使用)

更新時間：2023年08月13日 10:19:45 作者：天秤座的碼農

這篇文章主要給大家介紹了如何使用Vue2實現(xiàn)簡單的購物車功能,文中有相關的代碼示例,對我們的學習或工作有一定的幫助,需要的朋友可以參考下

vue2.0實例簡單購物車

頁面展示效果如下：?

該購物車實現(xiàn)了自動計算小計、總價。

代碼實現(xiàn)

<body>
    <div id="app">
        <div>
            <form action="">
                商品名稱:<input type="text" v-model="productName" name="productName">
                商品單價:<input type="text" v-model="productPrice" name="productPrice">
                <input type="button" value="添加商品" @click="addProduct">
            </form>
        </div>
        <ul>
            <li v-for="(pro,index) in productList"  :key="index">
                商品名稱: {{pro.productName}} ---------------- 商品單價: {{pro.productPrice}} 
                <button @click="addproToCart(index)">添加商品</button>
            </li>
        </ul>
        <cart :cartlist="cartList"></cart>
    </div>
    <template id="cartHtml">
        <div>
            <table border="1">
                <tr>
                    <td>商品</td>
                    <td>商品名稱</td>
                    <td>商品價格</td>
                    <td>商品數(shù)量</td>
                    <td>商品價格</td>
                </tr>
                <tr v-for="(pro,index) in cartlist" :key="index">
                    <td><input type="checkbox" v-model="pro.active"></td>
                    <td>{{pro.productName}}</td>
                    <td>{{pro.productPrice}}</td>
                    <td>
                        <button @click="reduceProNum(index)">-</button>
                        {{pro.productNum}}
                        <button @click="addProNum(index)">+</button>
                    </td>
                    <td>{{pro.productPrice * pro.productNum}}</td>
                </tr>
                <tr>
                    <td colspan="3">選中的商品:{{activeNum}}/{{cartlist.length}}</td>
                    <td colspan="2">商品總價:{{totalprice}}</td>
                </tr>
            </table>
        </div>
    </template>    
</body>

js代碼

    var cart = {
        template:'#cartHtml',
        props:['cartlist'],
        methods:{
            // 商品數(shù)量+1
            addProNum(index){
                let product = this.cartlist[index];
                product.productNum++
            },
            // 商品數(shù)量-1
            reduceProNum(index){
                let product = this.cartlist[index];
                // 判斷商品數(shù)量是否為1
                if(product.productNum==1){
                    this.cartlist.splice(index,1) // 為1，從數(shù)組中刪除
                }else{
                    product.productNum--
                }
            }
        },
        computed:{
            activeNum(){
                let activeProdctList = this.cartlist.filter(item=>{
                    return item.active
                })
                return activeProdctList.length
            },
            totalprice(){
                let result = 0;
                for(pro of this.cartlist){
                    if(pro.active){
                        result = result + pro.productPrice * pro.productNum
                    }
                }
                return result;
            }
        }
    }
    var app = new Vue({
        el:'#app',
        data(){
            return{
                productName:'',
                productPrice:0,
                productList:[],
                cartList:[]
            }
        },
        methods:{
            addProduct(){
                // todo 對新增的商品名稱和單價，進行驗證
                // 查找新增的商品是否存在于商品列表中，如果不在存在返回-1
                let findindex = this.productList.findIndex(item=>{
                    return item.productName==this.productName
                })
                if(findindex==-1){ // 判斷商品列表中是否存在新增商品
                    // 把新商品添加到商品列表中
                    this.productList.push({productName:this.productName,productPrice:this.productPrice})
                }else{
                    alert('此商品已經存在') // 商品已存在，給出提示
                }
            },
            // 添加商品到購物車，index是單擊商品的下標
            addproToCart(index){
                let newproduct = this.productList[index]; // 根據下標從商品列表中取出商品對象
                // 從購物車列表中查找，是否存在新的商品，如果查到返回購物車中的商品
                let product = this.cartList.find(item=>{
                    return item.productName==newproduct.productName
                })
                if(product){
                    // 如果有對應商品數(shù)量加1
                    product.productNum++
                }else{
                    // 沒有對應商品，添加新的商品到購物車
                    this.cartList.push({
                        productName:newproduct.productName,
                        productPrice:newproduct.productPrice,
                        productNum:1,
                        active:true
                    });
                }
                console.log(product);
            }
        },
        components:{
            cart
        }
    })

到此這篇關于使用Vue2實現(xiàn)簡單的購物車功能(可直接使用)的文章就介紹到這了,更多相關Vue2實現(xiàn)購物車功能內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: