Vue v-bind：class在默认真实性检查上不起作用

Question

所以我有一个简单的v-bind:class像这样：<div v-bind:class="{ showBranding: brandingEnabled }">BRANDING</div>

在我的数据中，brandingEnabled为true，可以更改为false。将其更改为false不会删除该类。

如果我执行以下操作，它将非常完美：<div v-bind:class="{ showBranding: (brandingEnabled == 'true') }">BRANDING</div>

将我的布尔值视为字符串会出现问题吗？我尝试将它们（在Vue数据中）设置为true，而不是“ true”，但这也没有任何改变。

我还尝试将数据设置为以下类型：通过props设置为布尔值，但无济于事。

如果可能的话，我真的希望它使用简单的语法... 任何帮助将不胜感激！

Answer 1

如果showBranding是CSS类，则必须在CSS className周围添加单引号，如下所示：

<div :class={'showBranding': brandingIsEnabled}>
// content
</div>

然后，您的类必须像这样在组件的样式标签内：

<style scoped>
 .showBranding {
   // content
 }
</style>

还检查您的brandingIsEnabled数据是否在脚本标记内，如下所示：

<script>
 export default {
  data() {
   return {
    brandingIsEnabled: true       
   }
  } 
 }
</script>

此示例使用单一组件语法。

Answer 2

new Vue({
        el: '#br',
        data: {
            showBranding: 'brandingClass',
            brandingEnabled:true
        }

    });

---

CSS代码

.brandingClass{
  display:none
}

---

html代码

<div id="br">
    <div :class="{ showBranding:brandingEnabled }">BRANDING</div>
</div>