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

【问题标题】：VueJS Event Handler for Changing CSS用于更改 CSS 的 VueJS 事件处理程序
【发布时间】：2021-10-02 20:46:43
【问题描述】：

我正在尝试使用 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);

【问题讨论】：

标签： html css vue.js

【解决方案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";
            },
        },
    },

});

【讨论】：