动态css不适用于复选框更改vue.js

Question

当checkbox 是checked 使用v-on:change 时，我正在尝试动态更改span 中某些文本的css，但它没有改变，我不知道为什么。

boolean 数据属性“bolden”确实会在单击时更改（通过 console.log 检查），但类不会。在 chrome 中的 devtools 上检查时，该类甚至没有出现在“span”元素标记中

这里是一段代码的jsfiddle链接：https://jsfiddle.net/rL0fzv7s/

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <input type="checkbox" value="food" v-model="blog.categories" v-on:change="bolden = !bolden">
  <span v-bind:class="bold">food</span>
</div>
.bold {
  font-weight: bolder;
  font-size: 25px;
  color: red;
}
new Vue({
  el: '#app',
  data: {
    bolden: false,
    blog: {
      title: "",
      content: "",
      categories: []
    }
  },
  computed: {
    bold: function() {
      return {
        bolden: this.bolden
      };
    }
  }
})

Answer 1

即使bolden 的值发生更改，您的样式也没有显示的原因是您使用的类名是.bold，但您从计算属性返回的类名称为@987654323 @。

将计算得到的 bold 函数的返回值更改为以下内容：

computed: {
  bold: function() {
    return {
      bold: this.bolden // class
    };
  }
}

Answer 2

你应该返回bold class 而this.bolden true。以下是更正后的代码。小提琴：https://jsfiddle.net/62mewykL/

 bold: function() {
          return {
            bold: this.bolden
          };
        }

或

只需在 HTML 中使用 v-bind:class="{'bold' : this.bolden}"