国产成人精品18p,天天干成人网,无码专区狠狠躁天天躁,美女脱精光隐私扒开免费观看

vue實(shí)現購物車(chē)全部功能的簡(jiǎn)單方法

發(fā)布時(shí)間：2021-08-17 12:16 來(lái)源： 閱讀：0 作者：老張在線(xiàn)敲代碼 欄目： JavaScript 歡迎投稿：712375056

主要功能如下：

  1. 增加商品信息
  2. 修改商品信息
  3. 刪除單個(gè)商品
  4. 刪除多個(gè)商品
  5. 清空購物車(chē)
  6. 對商品單價(jià)進(jìn)行降序排序
  7. 根據商品名稱(chēng)實(shí)現查找
  8. 實(shí)現商品數量加減
  9. 全選反選
  10. 實(shí)現勾選商品的總價(jià)計算

效果圖如下：

由于功能比較多就不一個(gè)個(gè)講了，我們先來(lái)講幾個(gè)主要功能的邏輯（增刪改查），最后放全放部代碼

首先我們先來(lái)看增加商品功能

//先來(lái)一個(gè)按鈕綁定顯示事件，點(diǎn)擊添加后出現一個(gè)彈窗
<button type="button" @click="xian">添加</button>

//return 中定義了一個(gè)dis默認為false
 xian() {
                if (!this.dis == false) {
                    this.dis = false
                } else {
                    this.dis = true
                }
            },

然后再彈窗中點(diǎn)擊確認修改，綁定一個(gè)事件把商品信息添加進(jìn)去

           <button type="button" @click="tian">確認添加</button>

 //將要添加的商品信息push到一個(gè)新的數組中，添加完成之后關(guān)閉彈窗
 tian() {
                if (this.name == "" || this.counrty == "" || this.price == "") {
                    alert("商品信息不允許為空！")
                    return false
                } else {

                    this.shopPings.push({
                        name: this.name,
                        counrty: this.counrty,
                        price: this.price,
                        count: this.count,
                    })
                }
                this.name = "",
                    this.counrty = "",
                    this.price = "",
                    this.count = ""
                this.dis = false
            },

商品增加進(jìn)去之后突然發(fā)現商品信息寫(xiě)錯了?。?？？不要慌，接下來(lái)帶大家看看修改功能

還是老規矩先定義一個(gè)按鈕綁定顯示事件，然后綁定顯示事件，除了事件名稱(chēng)之外，跟上面添加類(lèi)同，我們直接來(lái)看確認修改功能

//定義按鈕綁定事件
   <button type="button" @click="xiugai">確認修改</button>
   //將購物車(chē)中的商品信息跟修改之后的進(jìn)行賦值修改，修改完成之后關(guān)閉彈窗
    xiugai() {
                console.log(this.int)
                let index = this.int
                console.log(this.name, this.price, this.count, )
                this.shopPings[index].name = this.name
                this.shopPings[index].price = this.price
                this.shopPings[index].counrty = this.counrty
                this.shopPings[index].count = this.count

                this.dis1 = false
            },

有了增加修改之后我們再來(lái)寫(xiě)一個(gè)刪除

定義一個(gè)按鈕綁定事件，傳入一個(gè)index值最后splice根據下標刪除一條

定義一個(gè)按鈕綁定事件，傳入一個(gè)index值最后splice根據下標刪除一條
 <button @click="del(index)">刪除</button>	
  del(index) {
                this.shopPings.splice(index, 1);
            },

清空購物車(chē)的話(huà)就比較簡(jiǎn)單了直接設置按鈕點(diǎn)擊后數組為空即可

 alldel() {
                this.shopPings = []
            },

最后我們來(lái)看一下購物車(chē)中的查詢(xún)功能

//return中設置input的value值
//定義一個(gè)input框，綁定value值，設置enter鍵盤(pán)事件并且綁定搜索事件
<input type="text" placeholder="請輸入要查詢(xún)的商品名稱(chēng)" v-model="input_value" @keyup.13="search">

具體看注釋

//先來(lái)一個(gè)判斷判斷搜索框為空的時(shí)候進(jìn)行查詢(xún)會(huì )有提示信息不允許為空
//然后拿到數組中的每一項的名稱(chēng)進(jìn)行查找如果沒(méi)有這個(gè)商品名稱(chēng)則提示沒(méi)有該商品
//最后對數組filter進(jìn)行篩選，通過(guò)搜索框中輸入的商品名稱(chēng)對比購物車(chē)中的商品名稱(chēng)來(lái)找到對應商品
 search() {
                if (!this.input_value) {
                    return alert('請輸入內容')
                }
                if (
                    this.shopPings.every((v) => {
                        v.name.indexOf(this.input_value) == -1
                    })
                ) {
                    this.input_value = ''
                    return alert('沒(méi)有此商品')
                }
                this.shopPings = this.shopPings.filter((v) => {
                    v.name.replace(this.input_value, this.input_value)
                    return v.name.indexOf(this.input_value) != -1
                })
            }

全部代碼：

<template>
    <div class="shopCar">
        <header>

            <button type="button" @click="delSelect">批量刪除</button>
            <button type="button" @click="alldel">清空購物車(chē)</button>
            <button type="button" @click="xian">添加</button>
            <button type="button" @click="jiang">排序</button>
            <input type="text" placeholder="請輸入要查詢(xún)的商品名稱(chēng)" v-model="input_value" @keyup.13="search">
            <div class="xiu" v-show="dis1">
                <input type="text" placeholder="名稱(chēng)" v-model="name">
                <input type="text" placeholder="價(jià)格" v-model="price">
                <input type="text" placeholder="數量" v-model="count">
                <input type="text" placeholder="產(chǎn)地" v-model="counrty">

                <button type="button" @click="xiugai">確認修改</button>
            </div>
            <div class="add" v-show="dis">
                <input type="text" placeholder="名稱(chēng)" v-model="name">
                <input type="text" placeholder="價(jià)格" v-model="price">
                <input type="text" placeholder="數量" v-model="count">
                <input type="text" placeholder="產(chǎn)地" v-model="counrty">

                <button type="button" @click="tian">確認添加</button>
            </div>
        </header>
        <main>
            <ul>
                <li>
                    <p><input type="checkbox" v-model="allChecked">
                        全選</p>
                    <p>名稱(chēng)</p>
                    <p>產(chǎn)地</p>
                    <p>數量</p>
                    <p>單價(jià)</p>
                    <p>小計</p>
                    <p>操作</p>
                </li>
                <li v-for="(item,index) in shopPings" :key="index">
                    <p><input type="checkbox" v-model="item.checked">{{item.id}}</p>
                    <p>{{item.name}}</p>
                    <p>{{item.counrty}}</p>
                    <p><button type="button" @click="add(item)">+</button>
                        <input type="text" v-model="item.count" style="width:20px">
                        <button type="button" @click="remove(item)">-</button>
                    </p>
                    <p>{{item.price}}</p>
                    <p>{{item.price*item.count |suffix}}</p>
                    <p>
                        <button type="button" @click="xiu(index)"> 修改</button>

                        <button @click="del(index)">刪除</button>
                    </p>
                </li>
            </ul>
        </main>
        <footer>
            <p>總計{{state.sum |suffix}}</p>
        </footer>
    </div>
</template>
<style scoped lang="scss">
    .shopCar {
        width: 1000px;
        border: 2px solid black;
        margin: 100px auto;
        overflow: auto;

        header {
            display: flex;
            justify-content: space-between;
            width: 600px;
            height: 27px;
            overflow: hidden;

            .add {
                width: 400px;
                background: #e4e1e1;
                position: absolute;
                left: 39%;
                top: 40%;

                input {
                    display: block;
                    margin: 20px auto;

                }

                button {
                    display: block;
                    margin: 0 auto;
                }
            }

            .xiu {
                width: 400px;
                background: #e4e1e1;
                position: absolute;
                left: 39%;
                top: 40%;

                input {
                    display: block;
                    margin: 20px auto;

                }

                button {
                    display: block;
                    margin: 0 auto;
                }
            }
        }

        main {
            // height: 400px;
            margin-top: 10px;

            ul {

                li {
                    height: 78px;
                    border-bottom: 2px solid black;
                    display: flex;
                    justify-content: space-between;

                    p {
                        float: left;
                        width: 140px;
                        height: 27px;
                        border: 2px solid black;
                        text-align: center;
                    }
                }
            }
        }

        footer {
            height: 50px;
            margin-top: 13px;
            line-height: 50px;
        }
    }
</style>
<script>
    const shopData = [{
            id: "",
            name: "鞋子",
            counrty: "山西",
            count: 1,
            price: 800,
        },
        {
            id: "",
            name: "櫥柜",
            counrty: "北京",
            count: 1,
            price: 3200,
        },
        {
            id: "",
            name: "口紅",
            counrty: "河北",
            count: 2,
            price: 200,
        },
        {
            id: "",
            name: "漢堡",
            counrty: "河南",
            count: 2,
            price: 200,

        },

    ]

    export default {
        //過(guò)濾器
        filters: {
            suffix(value) {
                let price = Number(value)
                return `￥ ${price.toFixed(2)}`
                //在金額前面插入一個(gè)￥符號然后定義小數點(diǎn)后面為倆位數字
            }
        },
        computed: {

            //全選
            allChecked: {
                get() {
                    const checkeds = this.shopPings.filter((item) => item.checked)
                    return checkeds.length === this.shopPings.length
                },
                set(state) {
                    // console.log(state)
                    this.shopPings.map((item) => {
                        item.checked = state
                        return item
                    })
                }
            },
            //小計計算
            totalPrice: function () {
                var total = 0;
                for (var i = 0; i < this.checkList.length; i++) {
                    var item = this.checkList[i];
                    total += item.price * item.count;
                }
                return total.toLocaleString();
            },
            //選中的商品總價(jià)計算
            state() {
                const checkeds = this.shopPings.filter((item) => item.checked)
                const checked = checkeds.length === this.shopPings.length
                const sum = checkeds.reduce((a, b) => {
                    return a + b.count * b.price;
                }, 0)
                return {
                    count: checkeds.length,
                    sum
                }
            },
        },
        data() {
            return {
                shopPings: [],
                dis: false, //確認提交
                dis1: false, //確認修改
                id: "",
                name: "", //名稱(chēng)
                price: "", //單價(jià)
                count: "", //數量
                counrty: "", //產(chǎn)地
                input_value: "", //查詢(xún)框中input的值
            }
        },
        mounted() {
            window.fetch("/").then(() => {
                this.shopPings = shopData.map((item) => {
                    item.checked = false
                    return item
                })
            })
        },
        methods: {
            //添加商品
            xian() {
                if (!this.dis == false) {
                    this.dis = false
                } else {
                    this.dis = true
                }
            },
            //確認添加
            tian() {
                if (this.name == "" || this.counrty == "" || this.price == "") {
                    alert("商品信息不允許為空！")
                    return false
                } else {

                    this.shopPings.push({
                        name: this.name,
                        counrty: this.counrty,
                        price: this.price,
                        count: this.count,
                    })
                }
                this.name = "",
                    this.counrty = "",
                    this.price = "",
                    this.count = ""
                this.dis = false
            },

            //刪除商品
            del(index) {
                this.shopPings.splice(index, 1);
            },

            //刪除選中的商品
            delSelect() {
                this.shopPings = this.shopPings.filter((item) => {
                    if (!item.checked) {
                        return item
                    }
                })
            },
            //全部刪除
            alldel() {
                this.shopPings = []
            },
            //減少購買(mǎi)
            remove(data) {
                if (data.count > 0) {
                    data.count--
                }
                if (data.count === 0) {
                    data.checked = false
                }
            },
            //增加購買(mǎi)
            add(data) {
                data.count++
            },
            //修改商品
            xiu(i) {
                this.int = i
                if (!this.dis1 == false) {
                    this.dis1 = false
                } else {
                    this.dis1 = true
                }
            },
            // 確認修改
            xiugai() {
                console.log(this.int)
                let index = this.int
                console.log(this.name, this.price, this.count, )
                this.shopPings[index].name = this.name
                this.shopPings[index].price = this.price
                this.shopPings[index].counrty = this.counrty
                this.shopPings[index].count = this.count

                this.dis1 = false
            },
            //降序
            jiang() {
                this.shopPings.sort((a, b) => {
                    //排序基于的數據
                    return a.price - b.price;
                })
            },
            search() {
                if (!this.input_value) {
                    return alert('請輸入內容')
                }
                if (
                    this.shopPings.every((v) => {
                        v.name.indexOf(this.input_value) == -1
                    })
                ) {
                    this.input_value = ''
                    return alert('沒(méi)有此商品')
                }
                this.shopPings = this.shopPings.filter((v) => {
                    v.name.replace(this.input_value, this.input_value)
                    return v.name.indexOf(this.input_value) != -1
                })
            }

        }
    }
</script>

總結

到此這篇關(guān)于vue實(shí)現購物車(chē)全部功能的文章就介紹到這了,更多相關(guān)vue實(shí)現購物車(chē)功能內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng )、來(lái)自本網(wǎng)站內容采集于網(wǎng)絡(luò )互聯(lián)網(wǎng)轉載等其它媒體和分享為主，內容觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如侵犯了原作者的版權，請告知一經(jīng)查實(shí)，將立刻刪除涉嫌侵權內容，聯(lián)系我們QQ:712375056，同時(shí)歡迎投稿傳遞力量。

購
  • 100倍故障賠償
  • 1天無(wú)理由退款
  • 7x24小時(shí)服務(wù)
  • 0元快速備案
  • 1V1專(zhuān)席秘書(shū)
久久夜色撩人精品国产小说| 欧美A级在线现免费观看| 天堂А√在线中文在线新版| FREESEX欧美喷水| 国产亚洲精品BT天堂精选| 无码人妻久久1区2区3区|