欧美free性护士vide0shd,老熟女,一区二区三区,久久久久夜夜夜精品国产,久久久久久综合网天天,欧美成人护士h版

首頁跨境電商賣家服務(wù) 正文

評論

vue實(shí)現(xiàn)購物車案例 vue購物車案例實(shí)訓(xùn)報(bào)告

Allegro樂購者賣家服務(wù)2025-04-018280

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue購物車</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>購物車</h1>
        <ul>
            <li v-for="item in cart" :key="item.id">
                {{ item.name }} - {{ item.price }}元
                <button @click="removeItem(item)">刪除</button>
            </li>
        </ul>
        <h2>當(dāng)前購物車：</h2>
        <ul>
            <li v-for="item in cart" :key="item.id">{{ item.name }}</li>
        </ul>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                cart: [
                    { id: 1, name: '商品1', price: 100 },
                    { id: 2, name: '商品2', price: 200 },
                    { id: 3, name: '商品3', price: 300 }
                ]
            },
            methods: {
                removeItem(item) {
                    this.cart = this.cart.filter(item => item.id !== item.id);
                }
            }
        });
    </script>
</body>
</html>

這是一個(gè)簡單的Vue購物車示例，包括一個(gè)購物車列表和一個(gè)刪除按鈕。點(diǎn)擊刪除按鈕時(shí)，會從購物車中移除對應(yīng)的商品。

本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場。

轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。

本文鏈接：http://gantiao.com.cn/post/2027327086.html