javascript - Vue.js - 有条件地分配一个 CSS 类
问题描述
在使用 NativeBase 作为组件库的 VueNative 项目中(因此标签以 为前缀nb-
),我有以下代码。这在<template>
标签中,是包含导航按钮的 footer.vue 文件的一部分。当用户按下它并且它变为活动状态时,此逻辑可以很好地更改选项卡(按钮)的颜色。
<nb-button :active="tab2" :onPress="toggleTab2" :style="{ backgroundColor: (activeTab == 'tab2') ? 'rgb(117, 110, 116)' : 'rgb(82, 74, 81)' }">
<nb-text class="text">Instructions</nb-text>
</nb-button>
我想替换为文件中:style
的:class
所有nb-button
标签都引用类名,而不是每个标签中的硬编码背景颜色。这是我尝试过的 -
在<template>
标签中:
<nb-button :active="tab2" :onPress="toggleTab2" :class="{ (activeTab == 'tab2') ? "active" : "inactive" }">
<nb-text class="text">Instructions</nb-text>
</nb-button>
在<style>
标签中:
.inactive {
background-color: rgb(82, 74, 81);
}
.active {
background-color: rgb(117, 110, 116);
}
但是,在代码编辑器中,一条红色波浪线显示在:class
“'v-bind' 指令需要一个属性值”的行下方。如何修改它才能工作?
编辑 基于这篇文章,我还尝试了以下方法:
<nb-button :active="tab2" :onPress="toggleTab2" :style="(activeTab == 'tab2') ? 'active' : 'inactive'">
但它的行为就像它忽略了类名。当用户选择 tab2 时,会显示默认的活动颜色,而不是active
样式中指定的颜色。
解决方案
您没有逃避""
内部:class="{ (activeTab == 'tab2') ? "active" : "inactive" }"
,因此应替换"
为'
并基于此更改语法:
:class="{ active: (activeTab == 'tab2'), inactive: (activeTab !== 'tab2')}"
推荐阅读
- javascript - 在 JavaScript 中访问数组中的值
- kentico - Kentico - 来自 facebook Web 部分的用户个人资料图片
- c - MISRA 19.4 说明
- r - 如何从光栅文件(如 .jpeg、.jpg、.png、.gif)中抓取表格并保存为 excel 格式?
- arrays - Ruby - 存储在数组中并返回所有值
- node.js - 在Mongodb中存储最多2个小数位的数字?
- sharepoint - Powerapps 是否在 Sharepoint on prem 列表中可用的编辑表单上添加附件
- jakarta-ee - 如何使用 tomcat 提供静态内容?
- php - 从数据库 PHP 中拆分和挖掘数据
- scala - 将更新保存到数据框中并在 spark scala 中重用保存的数据框