代码之家 › 专栏 › 技术社区 › Bruno

Vue。js根据条件绑定到类

single-page-application vue.js javascript

1

Bruno · 技术社区 · 7 年前

使用此div声明:

<div v-bind:class="[currentPage === 'help' ? highlight : '']">

但是绑定不起作用(无论 currentPage 值)。

我有一个模型 当前页 跟踪活动页的变量:

    var vueApp = new Vue({
        el: '#vueApp',
        data: {
            currentPage: 'help',

如何根据vue属性的字符串值激活元素上类的绑定?

1 回复 | 直到 7 年前

1

4

acdcjunior Mukul Kumar 7 年前

在模板中:

<div v-bind:class="[currentPage === 'help' ? highlight : '']">

highlight 是一个 标识符 。

因此,该表达式期望 突出 是Vue实例/组件的属性。它正在被评估,但由于它可能是空的( undefined )你什么都得不到。

由于需要字符串,请执行以下操作:

<div v-bind:class="[currentPage === 'help' ? 'highlight' : '']">

演示:

new Vue({
  el: '#vueApp',
  data: {
    currentPage: 'help',
  }
})

.highlight { background-color: yellow }

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

<div id="vueApp">
  <div v-bind:class="[currentPage === 'help' ? 'highlight' : '']">Hello</div>
</div>