javascript - Vue.js 绑定(bind)隐藏父 div 和元素(不是有意的)

Question

我正在构建一个简单的 Vue.js 页面，我的 HTML 片段如下:

<div id="vueApp">
      <a href="#" class="button is-outlined" @click="showNextDiv" >Show Div</a>
      <div class="modal animated fadeIn" v-bind:class="{ is-active: isActive }">

     ...

     </div>
</div>

我正在使用 Bulma CSS 框架，并且“is-active”修饰符使 div 处于事件状态(顾名思义)。

我的问题是，每当我加载页面时 <div id="vueApp">不显示，使 isActive 变为 true 的按钮也不显示。

这是我的 vue 实例声明:

new Vue({
  el: '#vueApp',
  data: {
    isActive: false
  },
  methods: {
    showNextDiv: function(){
      this.isActive = true;
    }
  }
});

Answer 1

CSS 绑定(bind)中的破折号字符使该名称成为无效的 javascript 属性名称，因此您需要将其括在引号中:

v-bind:class="{ 'is-active': isActive }"

我怀疑您的控制台中可能有某些内容突出显示了此错误。

更新

应该包含我的 jsFiddle，显示如果 is-active 用引号引起来，您的 JS 和 HTML 代码可以正常工作:

https://jsfiddle.net/psteele/mzjb8wvb/