Javascript Vue v-bind：类不'；不进行默认真实性检查

所以我有一个简单的

v-bind:class

如下：

BRANDING

在我的数据中，

brandingEnabled

为true，可以更改为false。将其更改为false不会删除该类

如果我这样做，效果会非常好：

BRANDING

这可能是我的布尔值被当作字符串处理的问题吗？我尝试将它们（在我的Vue数据中）设置为true，而不是“true”，但这也不会改变任何事情

我还尝试通过道具将数据设置为type:Boolean，但没有效果

如果可能的话，我真的希望它使用简单的语法。。。

---

任何帮助都将不胜感激

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

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

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

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

//内容

然后类必须位于组件的样式标记内，如下所示：

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

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

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

.展示品牌{
//内容
}

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

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

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

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

导出默认值{
数据（）{
返回{
brandingIsEnabled：对
}
} 
}

本例使用单组件语法

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

    });

---

CSS代码

.brandingClass{
  display:none
}

---

html代码

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

品牌创建

它应该可以工作，这里的VueJs文档清楚地提到了这一点。你能在这里或JS fiddle中发布你的代码吗？如果

showBranding

类是

display:none

你做错了，用

v-If=“brandingEnabled”

代替。@lawrencerone不，这个类做的不止这些。我试了一下你的建议，但也没用。我认为关键是，

品牌化

非常有效。我是否必须将页面上的所有内容都放在这样的标签内。我不能从文件中提取JS和CSS吗？我将Vue与Laravel一起使用。我不认为这是问题所在，因为当我像这样全面检查时：

品牌化

，它可以完美地工作。。。