使用 Vue.js 访问 CSS 样式

Question

我正在尝试制作网站，我需要通过 Vue 访问我的风格。

我需要使用 Vue 访问 CSS因为样式.skill-bar是条的背景，而.skill-bar-fill是绿色灯丝，其宽度应该基于Vue中定义的数字：

所以我的意思是如何通过更改 Vue 中的数字来随时更改此.skill-bar-fill样式？ 如何在每个项目中分别更改.skill-bar-fill width ？

HTML

<div class="w-100 skill-bar">
    <div class=" skill-bar-fill"> {{ programming.item1}} %</div>
</div>

CSS

.skill-bar{
    text-align: center;
    color: $black;
    font-size: 0.75rem;
    height: 1rem;
    background: $bg-light;
    border-radius: 1rem;
}

.skill-bar-fill{
    height: 1rem;
    background: $green;
    border-radius: 1rem;
}

Vue

export default {
        name: 'Items',
        data() {
            return{
                programming: {item1: 95, item2: 90, },

            }

        }
    }

我正在尝试

Answer 1

保留 class skill-bar-fill和使用样式绑定：

<div class="w-100 skill-bar">
    <div class=" skill-bar-fill" :style="{width:programming.item1+'%'}"> {{ programming.item1}} %</div>
</div>

您无法修改该 class 的属性，因为它不是唯一的并且每个项目都是唯一的。

Answer 2

该答案基于原始问题。 您的要求已被简化，因此您的解决方案很好，下面可能不需要

对于第一个实例，您可以使用 CSS 变量作为宽度属性，并以编程方式更改该变量。 对于子序列实例，这不会单独工作，因为它们共享 CSS 所以对于那些你需要 object 样式语法的人。

将属性传递给第一个孩子，以便它知道它是第一个孩子并且需要设置变量

在 Vue 中设置 CSS 变量： 将 var 添加到 css class

对于后续的孩子使用 object 语法： https://v2.vuejs.org/v2/guide/class-and-style.html#Object-Syntax-1

我不清楚为什么你div的宽度需要参考第一个叔叔 - 如果第二个技能高于第一个怎么办？ - 但以上可能是答案。