Question

最近我已经注册了VueMstery，但我迷路了。为了理解代码，我习惯于可视化代码，如果无法理解代码，就不能动弹。我在以下代码中看不懂的是

名为updateProduct的函数如何使用传入的图像更新DOM，并且
如何知道要显示哪个图像。（这一点让我很困惑）

以下是代码

<body>
<div class="nav-bar"></div>
<div id="app">
    <div class="product">
        <div class="product-image">
            <img :src="image" alt="">
        </div>
        <div class="product-info">
            <h1>{{products}}</h1>
            <p v-if='inStock'>In Stock</p>
            <p v-else>Out of stock</p>
            <p v-if='inventory <= 10'>Low on stock</p>

            <ul>
                <li v-for='detail in details'>{{detail}}</li>
            </ul>
            
            <div v-for='variant in variants'
                 class='color-box'
                 :style="{backgroundColor: variant.variantColor}"
                 @mouseover='updateProduct(variant.variantImage)'>
            </div>
            cart {{cart}}
            <button @click='addToCart'>
                Add to cart
            </button>
        </div>
    </div>
</div>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>

和main.js

var app = new Vue({
    el: '#app',
    data: {
        products: 'socks',
        image: './assets/vmSocks-green.jpg',
        inStock: true,
        inventory: 10,
        details: ["80% cotton", "20% polyester", "Gender-Neutral"],

        variants: [
            {
                variantId: 2234,
                variantColor: "green",
                variantImage: "./assets/vmSocks-green.jpg"
            },
            {
                variantId: 2235,
                variantColor: "blue",
                variantImage: "./assets/vmSocks-blue.jpg"
            },
        ],
        cart: 0
    },
    methods: {
        addToCart: function(){
            this.cart +=1
        },
        updateProduct: function(image){
            this.image = image;
        }
    }
})

Answer 1

查看您已在模板中注册的事件处理程序：

@mouseover='updateProduct(variant.variantImage)'

事件触发时，Vue将自动运行该功能。函数updateProduct仅更新数据对象中的值image。 Vue会检测到该数据的任何更改，并在必要时更新DOM。

也是因为您的img标签取决于数据对象的image属性： <img :src="image" alt=""> 您会看到图像发生变化。

Vue如何通过方法知道要显示哪个图像并做出反应

1 个答案: