不能使用函数在vue.js模板上添加样式

Question

我试图在vue.js中使用函数生成样式的文本

<template>
<div class="col-md-3" :style="setColor(c.percentage, c.blocked)">

</template>
<script>
export default {
name: "",
methods:{
setColor(percentage,blocked){
let opacity = (percentage / 100).toFixed(2);
let color = '145,223,150';
if(blocked){
opacity = 0.6;
color = '234,59,37'
}else{
if(opacity>0){
if(opacity < 0.1){
opacity = 0.1;
}
color = '145,223,150'
}else{
opacity = 1;
color = '255,255,255';
}
}
return `rgba(${color},${opacity})`;
}
}
}
</script>
<style scoped>
</style>

但是它生成了代码

<div class="col-md-3" style=""></div>

我不知道哪里不对，我错过了什么吗?第一次使用vue，我有很多东西要学xD

Answer 1

从该方法中，您应该返回一个具有color或background-color作为属性和rgba(${color},${opacity})`;作为值的对象:

return {color:`rgba(${color},${opacity})`};