用于更改CSS的VueJS事件处理程序

Question

我试图使一个输入，它改变背景与VueJS。我只想显示背景的url，而不是整个CSS。我想要得到的CSS是:

linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('--BACKGROUND LINK--') no-repeat center center fixed

JS是:

function css_variable_watcher(name, prefix = "", suffix = "") {
return {
immediate: true,
handler(new_value, old_value) {
document.documentElement.style.setProperty(name, prefix + new_value + suffix);
},
};
}
var vue = new Vue ({
el: "body",
data: {
background: "--BACKGROUND LINK--",

},
watch: {
background: css-variable-watcher("linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(","--BACKGROUND LINK--",") no-repeat center center fixed"),
},
});

CSS变量为background: var(--background);

Answer 1

找到了!不需要CSS

var vue = new Vue ({
el: "#body",
data: {
background: "--BACKGROUND LINK--",

},
watch: {
background: {
immediate: true,
handler(new_background, old_background) {
document.getElementById("body").style.background = "linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(" + new_background + ") no-repeat center center fixed";
},
},
},
});