Vue类绑定属性和多个顺风类答案

【问题标题】：Vue class binding attribute and multiple tailwind classesVue类绑定属性和多个顺风类
【发布时间】：2022-01-24 17:46:58
【问题描述】：

我正在尝试将一个属性和多个顺风类绑定到一个 html 元素。这是一个选项卡菜单，所以我的想法是，对于“活动”选项卡，我动态获取标题并注入一些顺风类来改变“活动”选项卡的外观和感觉。

        <li
            :class="{
                selected: title === selectedTitle,
                selected ? ['border-b-2', 'border-blue-700' ]
            }"
            @click.stop.prevent="selectedTitle = title"
            v-for="title in tabTitles"
            :key="title"
            role="presentation"
        >

目前之前的代码对我不起作用。

【问题讨论】：

标签： javascript css vue.js tailwind-css

【解决方案1】：

从我的角度来看，以下行无法正常工作：

selected ? ['border-b-2', 'border-blue-700' ]

这是一个简短的 if else 没有 else 案例 - 我想你应该写这样的东西：

<li :class="{
  'selected border-b-2 border-blue-700': title === selectedTitle,
}">

【讨论】：

【解决方案2】：

尝试如下：

new Vue({
  el: "#demo",
  data() {
    return {
      tabTitles: ['aaa', 'bbb', 'ccc'],
      selectedTitle: ''
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="demo">
  <li :class=" selectedTitle === title ? 'border-b-2 border-blue-700' : '' "
      @click.stop.prevent="selectedTitle = title"
      v-for="title in tabTitles"
      :key="title"
      role="presentation"
  >{{title}}</li>
</div>

【讨论】：