[Vuejs]-How to change css background in vue js?

Try this! You could use :style but I try to stay away from inline CSS even with scoped styling.

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:{
    }
});