如何在Vue js中更改CSS背景？

Question

我尝试更改滑块的背景颜色。但是我的代码无法正常工作。谁能帮我吗？

这是我的代码

html

<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">

js代码

     var vm = new Vue({

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


            },

          }

     });

Answer 1

切换

:class="{background:fillColor}" 

to

:style="{background:fillColor}" 

Answer 2

尝试一下！

HTML

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

JS

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