Vue类绑定属性和多个顺风类
Vue类绑定属性和多个顺风类
提问于 2022-01-24 01:11:50
我试图将属性和多个顺风类绑定到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"
>目前，前面的代码并不适用于我。
回答 2
Stack Overflow用户
发布于 2022-01-24 01:36:58
尝试如下：
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>
Stack Overflow用户
发布于 2022-01-24 01:38:41
从我的观点来看，下面这一行不能工作：
selected ? ['border-b-2', 'border-blue-700' ]这是一个简短的，如果没有其他情况-我认为你写了这样的东西：
<li :class="{
'selected border-b-2 border-blue-700': title === selectedTitle,
}">页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70831390
复制相关文章
相似问题
腾讯云开发者
