在Vue.js中的类内使用三元条件

Question

当百分比达到57时，如何编写三元条件来更改此进度栏的颜色

这是设置进度条代码的方式

<div
   class="progress-bar"
    role="progressbar"
    :style="{width:(quoteCount / maxQuotes) * 100 + '%'}"
    aria-valuenow="25"
    aria-valuemin="0"
    aria-valuemax="100">
   {{quoteCount}} / {{maxQuotes}}
 </div>

..................

所以，我想在达到75％时添加类progress-bar bg-danger

Answer 1

您需要访问进度条的值，因此理想情况下，您需要将v-model设置为某些数据值，例如progress。然后就这样：

:class="progress > 75 ? 'bg-danger' : '' "

Answer 2

[不是特定于OP的问题，但我一直在寻找相同的问题，这有助于朝正确的方向前进。希望这也会对其他人有所帮助...

我想扩展/折叠一组导航项。例如，以下页面

可以位于网站的“关于我们”部分下。

领导
• 历史
• 职业

在此示例中，如果选择了那些子菜单项中的任何一个，我想通过将父类设置为active来展开整个“关于我们”导航组。如果用户单击了另一个“组”，我想将父类设置为collapsed。

<div class="nav item">
    <a class="nav-link"
        :class="(currentGroup === 'about') ? 'active' : 'collapsed'">About Us</a>
    ...
</div>

<div class="subnav-items">
    <a :href="'/leaderhip'"
        :class="{'active':(pathname === 'leadership')}">Leadership</a>
    <a :href="'/history'"
        :class="{'active':(pathname === 'history')}">History</a>
    <a :href="'/careers'"
        :class="{'active':(pathname === 'careers')}">Careers</a>
</div>

...

data: () => ({
    currentGroup: '',
    groups: {
        about: [
            'leadership',
            'history',
            'careers',
        ],
    },
    pathname: '',
}),
created() {
    this.pathname = window.location.pathname.split('/')[1];

    if (this.groups.about.includes(this.pathname)) {
        this.currentGroup = 'about';
    }
}