Question

<button @click="startEffect"> Start Effect</button>
<br/>
<div id="effect" class="highlight" :class="{highlight: enableHighlight}"></div>

我只需要基于数据属性enableHighlight来应用Highlight类，但是由于某些原因，在调用startEffect函数时该类不适用。

<script>
    export default {
        data() {
            return {
                enableHighlight: false
            }
        },
        methods: {
            startEffect: function () {
                this.enableHighlight = !this.enableHighlight;
            }
        }
    }
</script>

我已调试并确认单击按钮时enableHighlight的值已切换并且存在CSS类。但是，单击按钮后，该类将不会应用于div。

Answer 1

当拥有“正常” Vue属性和一个动态属性时，您真的很迷惑class。删除正常的。 <div id="effect" :class="{highlight: enableHighlight}"></div>

要使其正常工作，您需要删除function定义中的startEffect：

startEffect() {
    this.enableHighlight = !this.enableHighlight;
}

为什么？因为this在定义函数的不同方式上是不同的。了解有关this here的更多信息。

Vue.js v-bind类未动态应用类

1 个答案: