javascript - Vue.js 根据条件绑定(bind)到类

Question

使用这个 div 声明:

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

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

但是绑定(bind)不起作用(无论 currentPage 值如何，“突出显示”类都不会应用)。

我有这个模型，其中有 currentPage 变量跟踪事件页面:

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

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

Answer 1

在模板中:

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

highlight 是一个标识符。

因此，这样的表达式期望 highlight 是 Vue 实例/组件的属性。它正在被评估，但由于它可能是空的(未定义)，所以你什么也得不到。

既然您想要字符串，请执行以下操作:

<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>