Vue class 綁定屬性和多個順風類

Question

我正在嘗試將一個屬性和多個順風類綁定到 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"
        >

目前，以前的代碼對我不起作用。

Answer 1

嘗試如下：

 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>

Answer 2

從我的角度來看，以下行無法正常工作：

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

這是一個簡短的 if else 沒有 else 案例 - 我認為你應該寫這樣的東西：

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