使用Vue2實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車功能(可直接使用)

更新時(shí)間：2023年08月13日 10:19:45 作者：天秤座的碼農(nóng)

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

vue2.0實(shí)例簡(jiǎn)單購(gòu)物車

頁(yè)面展示效果如下：?

該購(gòu)物車實(shí)現(xiàn)了自動(dòng)計(jì)算小計(jì)、總價(jià)。

代碼實(shí)現(xiàn)

<body>
    <div id="app">
        <div>
            <form action="">
                商品名稱:<input type="text" v-model="productName" name="productName">
                商品單價(jià):<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}} ---------------- 商品單價(jià): {{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>商品價(jià)格</td>
                    <td>商品數(shù)量</td>
                    <td>商品價(jià)格</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">商品總價(jià):{{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 對(duì)新增的商品名稱和單價(jià)，進(jìn)行驗(yàn)證
                // 查找新增的商品是否存在于商品列表中，如果不在存在返回-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('此商品已經(jīng)存在') // 商品已存在，給出提示
                }
            },
            // 添加商品到購(gòu)物車，index是單擊商品的下標(biāo)
            addproToCart(index){
                let newproduct = this.productList[index]; // 根據(jù)下標(biāo)從商品列表中取出商品對(duì)象
                // 從購(gòu)物車列表中查找，是否存在新的商品，如果查到返回購(gòu)物車中的商品
                let product = this.cartList.find(item=>{
                    return item.productName==newproduct.productName
                })
                if(product){
                    // 如果有對(duì)應(yīng)商品數(shù)量加1
                    product.productNum++
                }else{
                    // 沒(méi)有對(duì)應(yīng)商品，添加新的商品到購(gòu)物車
                    this.cartList.push({
                        productName:newproduct.productName,
                        productPrice:newproduct.productPrice,
                        productNum:1,
                        active:true
                    });
                }
                console.log(product);
            }
        },
        components:{
            cart
        }
    })

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

您可能感興趣的文章: