使用 Vue.js 访问 CSS 样式答案

【问题标题】：Accessing CSS style with Vue.js使用 Vue.js 访问 CSS 样式
【发布时间】：2020-11-19 12:56:33
【问题描述】：

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

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

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

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, },

            }

        }
    }

我正在尝试

【问题讨论】：

标签： javascript css vue.js vuejs2 vue-component

【解决方案1】：

保留类 skill-bar-fill 并使用样式绑定：

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

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

【讨论】：

【解决方案2】：

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

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

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

在 Vue 中设置 CSS 变量： Add var into css class

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

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

【讨论】：