vue如果實(shí)現(xiàn)購(gòu)物車功能

本文小編為大家詳細(xì)介紹“vue如果實(shí)現(xiàn)購(gòu)物車功能”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“vue如果實(shí)現(xiàn)購(gòu)物車功能”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)忠縣免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

原理分析和實(shí)現(xiàn)

注意想實(shí)現(xiàn)該功能，需要學(xué)習(xí)：Vue學(xué)習(xí)之路（基礎(chǔ)篇），深入的了解每個(gè)指令的使用

首先，還是先把布局寫好，和引入vue，準(zhǔn)備vue實(shí)例，這個(gè)不多說，代碼如下

<!DOCTYPE html>

<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="UTF-8">

    <title>vue實(shí)現(xiàn)購(gòu)物車</title>

</head>

<body>

<div id="app">

    <h4>購(gòu)物車</h4>

    名稱：<input style="width:60px" type="text" v-model="nameValue"> <br/>

    單價(jià)：<input style="width:60px" type="text" v-model="priceValue"> <br/>

    數(shù)量：<input style="width:60px" type="text" v-model="countValue">

    <button @click="add（）">添加購(gòu)物車</button>

    <hr/>

    <table border="1">

        <tr>

            <td>名稱</td>

            <td>單價(jià)</td>

            <td>數(shù)量</td>

            <td>小計(jì)</td>

        </tr>

        <tr v-for="（product,index） in products">

            <td>{{product.name}}</td>

            <td>{{product.price}}</td>

            <td>

                <button @click="desc（index）">-</button>

                {{product.count}}

                <button @click="incr（index）">+</button>

            </td>

            <td>{{product.price*product.count}}</td>

        </tr>

        <tr>

            <td colspan="4">總價(jià)：{{total（）}}元</td>

        </tr>

    </table>

</div>

</body>

</html>

<script src="js/vue-min.js"></script>

<script>

    new Vue（{

        el: "#app",

        data: {

            products: [

                {name: "秋褲", price: "81", count: 2},

                {name: "華為", price: "5810", count: 1},

            ],

            nameValue: "",

            priceValue: "",

            countValue: 0,

            totalPrice:0

        },

        methods: {

            incr（index） {

                this.products[index].count++;

            },

            desc（index） {

                this.products[index].count--;

            },

            add（） {

                this.products.push（{name: this.nameValue, price: this.priceValue, count: this.countValue}）;

                this.nameValue = "";

                this.priceValue = "";

                this.countValue = 0;

            },

            total（）{

                var price=0;

                for （var i = 0; i <this.products.length; i++） {

                    price+=this.products[i].price * this.products[i].count

                }

                return price.toFixed（2）;

            }

        }

    }）

</script>

讀到這里，這篇“vue如果實(shí)現(xiàn)購(gòu)物車功能”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站欄目：vue如果實(shí)現(xiàn)購(gòu)物車功能
URL標(biāo)題：http://muchs.cn/article24/ijcice.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、云服務(wù)器、品牌網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、外貿(mào)建站、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站優(yōu)化排名