Vue.js通过基于条件的方法设置类
Vue.js通过基于条件的方法设置类
提问于 2020-03-17 18:22:36
我正在尝试在使用顺风构建的导航栏中设置活动/非活动链接状态。我正在发送一个基于url (ActiveLink)的道具。
我试图实现的东西是这样的：
<a href="/test" :class="{active(): ActiveLink == 'test', inactive(): ActiveLink !='test' }">Test</a>
<a href="/test2" :class="{active(): ActiveLink == 'test2', inactive(): ActiveLink !='test2' }">Test</a>使用活动/非活动方法返回需要应用的类，而不是打印
<a href="/test" class="active">Test</a>active() {
return "px-3 py-2 rounded-md text-sm font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700"
},
inactive() {
return "mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"
}我认为我在:class=上走错了路，但似乎找不到合适的替代方案
回答 2
Stack Overflow用户
发布于 2020-03-17 18:28:13
相同的条件不需要写两次。只需在需要的时候放入active类，否则保留为空。
<a href="/test" :class="{'active': ActiveLink == 'test'}">Test</a>更新
在浏览了你的评论后，我对你的要求做了修改-
<a href="/test" :class="ActiveLink == 'test' ? active() : inactive()">Test</a>Stack Overflow用户
发布于 2020-03-17 18:52:26
您可以使用多个条件来绑定类，如下所示
<a href="/test" :class="ActiveLink == 'test' ?'active':'inactive'">Test</a>或
<a href="/test" :class="[{active: ActiveLink == 'test'}, {inactive: ActiveLink !='test' }]">Test</a>请注意，使用对象绑定类的Vue.js。因此，为了使用具有多个条件的多个类，我们可以使用类对象的数组。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60720350
复制相关文章
相似问题
腾讯云开发者
