Question

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

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，但是您从计算属性返回的类名被称为.bolden。

将计算出的bold函数的返回值更改为以下值：

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

Answer 2

您应返回bold为true的this.bolden类。下面是更正的代码。小提琴：https://jsfiddle.net/62mewykL/

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

OR

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

动态CSS无法在复选框更改vue.js上运行

2 个答案: