18-watch-購物車

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        li {
            display: flex;
            justify-content: space-around;
            text-align: center;
            line-height: 100px;
            height: 100px;
            padding: 10px;
        }

        img {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div id="box">
        <div v-if='list.length === 0'>空空如也</div>
        <template v-else>
            <input type="checkbox" v-model="isAllChecked">全選/全不選
            <ul>
                <li v-for='(item,index) in list' :key='item.id'>
                    <div>
                        <input type="checkbox" v-model='checkgroup' :value="item" @change="checked()">
                    </div>
                    <img :src="item.pic" alt="">
                    <div>{{item.name}}</div>
                    <div>￥{{item.price}}</div>
                    <div>{{item.id}}</div>
                    <div>
                        <button @click="item.number--" :disabled="item.number===1">-</button>
                        {{item.number}}
                        <button @click="item.number++" :disabled="item.number === item.limit">+</button>
                    </div>
                    <div>
                        <button @click="handleDel(index,item.id)">刪除</button>
                    </div>
                </li>
            </ul>
            <div style="text-align: right;padding: 0 50px;">
                總價{{sum()}}
            </div>
        </template>
    </div>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                checkgroup: [],
                isAllChecked: false,
                list: [
                    {
                        "id": 1,
                        "name": "商品1",
                        "number": 1,
                        "pic": "https://c-ssl.duitang.com/uploads/blog/202011/16/20201116210409_fdb12.jpg",
                        "msg": "頭像",
                        "price": 10,
                        "limit": 1,//限購
                    },
                    {
                        "id": 2,
                        "name": "商品2",
                        "number": 2,
                        "pic": "https://c-ssl.duitang.com/uploads/blog/202010/31/20201031204228_sewqy.jpg",
                        "msg": "頭像",
                        "price": 20,
                        "limit": 5,//限購
                    },
                    {
                        "id": 3,
                        "name": "商品3",
                        "number": 3,
                        "pic": "https://c-ssl.duitang.com/uploads/item/202005/23/20200523141101_ungtj.jpg",
                        "msg": "頭像",
                        "price": 30,
                        "limit": 10,//限購
                    },
                ]
            },
            methods: {
                sum() {
                    var total = 0
                    this.checkgroup.forEach(item => {
                        total += item.price * item.number
                    })
                    return total
                },
                // 刪除方法
                handleDel(index, deleteid) {
                    // 刪除checkgroup里面對應(yīng)的元素定踱，通過id
                    this.checkgroup = this.checkgroup.filter(item => item.id !== deleteid)
                    // 刪除原數(shù)組屋吨，通過index
                    this.list.splice(index, 1)

                    //判定是否全勾選上
                    this.checked()
                },
                //全選/全不選
                // handleChange(ev) {
                //     // console.log("change",ev.target.checked)
                //     console.log(this.isAllChecked)
                //     if (this.isAllChecked) {
                //         this.checkgroup = this.list
                //     } else {
                //         this.checkgroup = []
                //     }
                //     //判斷是否全選
                // },
                checked() {
                    if (this.checkgroup.length === this.list.length) {
                        this.isAllChecked = true
                    } else {
                        if(this.checkgroup.length === this.list.length){
                            this.isAllChecked = false
                        }
                    }
                }
            },
            //監(jiān)聽狀態(tài)的改變
            watch:{
                isAllChecked(data){
                    console.log("isAllChecked狀態(tài)改變了",data)
                    if (this.isAllChecked) {
                        this.checkgroup = this.list
                    } else {
                        this.checkgroup = []
                    }
                }
            }
        })
    </script>
</body>

</html>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末山宾，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子资锰，更是在濱河造成了極大的恐慌，老刑警劉巖绷杜，帶你破解...
沈念sama閱讀 219,589評論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異鞭盟，居然都是意外死亡圾结，警方通過查閱死者的電腦和手機齿诉，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,615評論 3贊 396
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門晌姚，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人挥唠，你說我怎么就攤上這事』酪椋” “怎么了？”我有些...
開封第一講書人閱讀 165,933評論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵盅安，是天一觀的道長。經(jīng)常有香客問我别瞭，道長腌紧，這世上最難降的妖魔是什么畜隶？我笑而不...
開封第一講書人閱讀 58,976評論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任号胚，我火速辦了婚禮，結(jié)果婚禮上猫胁，老公的妹妹穿的比我還像新娘。我一直安慰自己弃秆，他們只是感情好届惋，可當(dāng)我...
茶點故事閱讀 67,999評論 6贊 393
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布菠赚。她就那樣靜靜地躺著，像睡著了一般衡查。火紅的嫁衣襯著肌膚如雪瘩欺。梳的紋絲不亂的頭發(fā)上拌牲，一...
開封第一講書人閱讀 51,775評論 1贊 307
城市分裂傳說
那天，我揣著相機與錄音塌忽，去河邊找鬼拍埠。笑死土居，一個胖子當(dāng)著我的面吹牛嬉探，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播甲馋，決...
沈念sama閱讀 40,474評論 3贊 420
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼定躏！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起芹敌，我...
開封第一講書人閱讀 39,359評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎氏捞，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體液茎，經(jīng)...
沈念sama閱讀 45,854評論 1贊 317
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡逞姿，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 38,007評論 3贊 338
?白月光啟示錄
正文我和宋清朗相戀三年滞造，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片栋烤。...
茶點故事閱讀 40,146評論 1贊 351
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖明郭，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情薯定，我是刑警寧澤始绍，帶...
沈念sama閱讀 35,826評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布话侄，位于F島的核電站，受9級特大地震影響满葛，放射性物質(zhì)發(fā)生泄漏径簿。R本人自食惡果不足惜篇亭，卻給世界環(huán)境...
茶點故事閱讀 41,484評論 3贊 331
男人毒藥：我在死后第九天來索命
文/蒙蒙一锄贷、第九天我趴在偏房一處隱蔽的房頂上張望曼月。院中可真熱鬧，春花似錦哑芹、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,029評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽乙嘀。三九已至末购，卻和暖如春虎谢，著一層夾襖步出監(jiān)牢的瞬間盟榴，已是汗流浹背婴噩。一陣腳步聲響...
開封第一講書人閱讀 33,153評論 1贊 272
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留几莽，地道東北人。一個月前我還...
沈念sama閱讀 48,420評論 3贊 373
代替公主和親
正文我出身青樓银觅，卻偏偏與公主長得像坏为，于是被迫代替她去往敵國和親究驴。傳聞我的和親對象是個殘疾皇子匀伏，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 45,107評論 2贊 356

18-watch-購物車

推薦閱讀更多精彩內(nèi)容