Question

使用这个div声明：

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

我相应地构建：https://vuejs.org/v2/guide/class-and-style.html#Array-Syntax

但绑定不起作用（无论currentPage值如何，该类＆＃39;突出显示＆＃39;从未应用过。）

我有这个模型，其中有currentPage变量跟踪活动页面：

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

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

Answer 1

在模板中：

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

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>

Vue.js根据条件

1 个答案: