css使用滤镜实现网页黑白效果

        以下代码直接给页面的html或body添加css样式，均可以实现网页的黑白效果。

.html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -webkit-filter: grayscale(1);
}

        在vue项目中，可以在app.vue页面中。判断当前是否需要显示黑白页面。

 watch: {
        "$store.state.switchValue"(newValue, old) {
            if (newValue === true) {
                document.querySelector("html").classList.add("html");
            }
            if (newValue === false) {
                document.querySelector("html").classList.remove("html");
            }
        },
    },

        我在vuex中，存储了是否需要黑白显示的变量。在修改该变量的时候，记得要同步修改vuex中的值。

 watch: {
        // 侦听是否黑白模式
        switchValue(newValue, oldValue) {
            this.$store.commit("setSwitchValue", newValue);
        },
    },

        如果需要使用vuex存储该变量，那么控制当前变量的组件，v- model所绑定的值，同时需要从vuex中获取。

 data() {
        return {
            // 黑白模式v-model
            switchValue: this.$store.state.switchValue,
        };
    },