Css 如何在b-col（引导vue）元素中绑定自定义样式？

我需要向我的

元素添加自定义样式，如下所示：

<b-container fluid class="bootstrap-container">
    <b-row id="plan-execution">
        <b-col :style="executionProgress" >Hello!</b-col>
    </b-row>
</b-container>

（根据从API收集的数据计算样式）

我试过：

：style=“”

，

v-bind:style=“”

，但没有效果

在下面的代码中，绑定样式工作得非常完美

你好

---

简短问题：如何将以前填充的样式绑定到

元素？

绑定

:style

，因为字符串在引导Vue组件上似乎不起作用。您可以使用带有驼峰式CSS属性（即

marginTop

、

backgroundImage

等）和字符串值的对象将样式传递给它们。就你而言：

executionProgress: { 
  background: 'linear-gradient(to right, rgba(0, 255, 0, 0.2) 0% , rgba(0, 255, 0, 0.2) 55.00%, rgba(0, 255, 0, 0.0) 57.00%) no-repeat'
}

看到它工作了吗

newvue({
el:“#应用程序”，
模板：“#appTemplate”，
数据：（）=>({
执行进度：{
背景：“线性渐变（向右，rgba（0,255,0,0.2）0%，rgba（0,255,0,0.2）55.00%，rgba（0,255,0,0.0）57.00%）不重复”
}
})
})

.container{
背景色：#eee；
}

第1页，共3页
第2页，共3页
三分之三

我解决问题的方式与@Andrei Gheorghiu建议的略有不同

我使用了“普通”而不是“代码”，并且工作正常。 我的解决方案：

<div class="container sah-table">
    <div id="plan-execution" class="row">
        <div class="col-sm-12" :style="executionProgress">Hello</div>
    </div>
</div>

而且它也有效

---

我不喜欢不知道自己做错了什么，我现在有两个解决方案：）

您能提供一个可运行的解决方案吗？乍一看，

executionProgress

似乎不是应用时所认为的那样。我忘了添加计算

executionProgress

变量的函数如果使用DOM元素，实际上可以使用字符串。但是引导Vue组件中的

style

实现要求它是对象，因此您的

style

可以与引导Vue合并。这两种解决方案都很好，因为它们都有效（现在你知道原因了）。另外，顺便说一句，您可以非常轻松地更改返回的对象（在DOM和组件上都可以工作）。看起来Vue允许在组件中使用

string

样式，这是一个特定于引导Vue的问题。

<div class="container sah-table">
    <div id="plan-execution" class="row">
        <div class="col-sm-12" :style="executionProgress">Hello</div>
    </div>
</div>

        calculateExecutionProgress: function(progress: number) {
            let alpha = '0.2'

            this.executionProgress = 'background: linear-gradient(to right, rgba(0, 255, 0, ' +  alpha + ') 0% , rgba(0, 255, 0, ' +  alpha + ') ' + (Math.min(progress,1) * 100).toFixed(2) + '%, rgba(0, 255, 0, 0.0) ' + ((Math.min(progress  + 0.02, 1)) * 100).toFixed(2) + '%) no-repeat';
            console.log(this.executionProgress)
        },