Javascript 如何在vue js中更改css背景？

我正在尝试更改滑块的背景色。但是我的代码工作不正常。有人能帮我吗

这是我的密码

html

开关

到

---

试试这个！您可以使用

：style

，但我尝试远离内联CSS，即使使用范围样式

HTML

---

您正在设置元素上的

类，而不是
样式
。尽管我建议设置/更改类，然后使用CSS将线性渐变样式应用于该类。使用
样式
，而不是
类
。@AlexBrohshtut获得了它，谢谢…问问自己-“我为什么要将背景设置为红色？”-这是因为它现在是活动元素吗？因为它是无效的？这些是状态，类非常适合表示元素上的状态。现在您可能有了
，您将根据需要添加和删除“活动”类。然后在CSS中创建一个样式，上面写着
input.active{…linear gradient（…}
——不要再摆弄代码中的样式了，它不应该关心样式，而应该关心状态。
<a href="#" @click.prevent="redColor">Change Color</a>
<input type="range" :class="{background:fillColor}" class="slider-range" id="range" value="0" name="range" min="0" step="1" max="8">

     var vm = new Vue({

          el:'#app',
          data:{
            fillColor:''
          },
          methods:{
            redColor:function(){
                this.fillColor = 'linear-gradient(90deg, #f5f4f4 0, rgb(209, 39, 16) 100%)';


            },

          }

     });

:class="{background:fillColor}" 

:style="{background:fillColor}" 

<a href="#" v-on:click="bgColor='red-color'">Change Color</a>
<input type="range" :class="bgColor" class="slider-range" id="range" value="0" name="range" min="0" step="1" max="8">

<style scoped>
.red-color {
    background: linear-gradient(90deg, #f5f4f4 0, rgb(209, 39, 16) 100%);
}
</style>

var vm = new Vue({
    el:'#app',
    data:{
        bgColor:''
    },
    methods:{
    }
});