vue绑定类不更新答案

【问题标题】：vue bind class does not updatevue绑定类不更新
【发布时间】：2019-12-19 07:55:45
【问题描述】：

<div id="nav">
    <div v-bind:class="['staticClass', { 'show' : visible }]"></div>
</div>

脚本：

var nav = new Vue({
    el: '#nav',
    data: {
        visible: false
    }
});

document.getElementById('hamburger', addEventListener('click', function(){
    nav.visible = !nav.visible;
}

它最初可以工作。仅当可见为真时才添加“显示”类。单击“汉堡包”时，nav.visible 会正确更改，但类绑定不会更新。无论 nav.visible 值如何，在创建页面后都不会添加或删除“显示”类。知道为什么吗？

【问题讨论】：

为什么要将常规的 javascript 点击监听器与 vue.js 结合使用
在元素上使用@click 来触发方法调用。
修复明显的语法错误后，我cannot reproduce。请创建一个minimal reproducible example。
@str 你不觉得jsfiddle.net/9rs0e5yv 会更好吗？
@QuentinAlbert 这取决于。 Vue.js 是“渐进式可采用的”，这可能正是这样做的情况。

标签： javascript css vue.js

【解决方案1】：

你应该这样做：

Vue.config.devtools = false
Vue.config.productionTip = false

const nav = new Vue({
    el: '#nav',
    data: {
      visible: false
    },
    methods: {
      toggleClass() {
        this.visible = !this.visible  
      }
    }
});

.staticClass {
  display: none
}

.show {
  display: block
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="nav">
    <button @click="toggleClass">hamburger</button>
    <div 
      v-bind:class="['staticClass', { 'show' : visible }]">
      foo
    </div>
</div>

【讨论】：