时间戳

首页 > 解决方案 > 当我在 vuejs 中单击它时，如何将 div 中的文本从“暗”和“亮”来回切换？

javascript - 当我在 vuejs 中单击它时，如何将 div 中的文本从“暗”和“亮”来回切换？

问题描述

我正在为我的网站进行页面颜色切换，我想从使用两个不同的单选按钮更改为div单击以切换颜色。我还需要div更改中的文本：

var theme = new Vue({
    el: '#theme',
    data: {
        picked: local?.theme || 'default',
    },
    watch: {
        picked: function (val) {
            if (val == 'Dark') {
                local.theme = 'dark';
                document.documentElement.style.setProperty("--bg", "black");
                document.documentElement.style.setProperty("--color", "white");
            } else if (val == 'Light') {
                local.theme = 'light';
                document.documentElement.style.setProperty("--bg", "rgb(206, 206, 206)");
                document.documentElement.style.setProperty("--color", "black");
            }
            if (cookies) {
                localStorage.setItem("siteData", JSON.stringify(local));
            }
        },
    }
});

<div id="theme">
    <span>Chose the color theme you want (works now)</span>
    <br>
    <div>Dark/Light toggle</div>
    <input type="radio" id="dark" value="Dark" v-model="picked">
    <label for="dark">Dark</label>
    <br>
    <input type="radio" id="light" value="Light" v-model="picked">
    <label for="light">Light</label>
    <br><br>
    <span>Current Mode: {{ picked }}</span>
</div>

标签： javascripthtmlcssvue.js

解决方案

你不应该直接使用 DOM，这不是 vue 的方式。

尝试使用绑定到您选择的属性的类来包装您的元素：

new Vue({
    el: '#theme',
    data: {
        picked: 'default'
    }
});
.dark{
  background-color: rgb(206, 206, 206);
  color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.js"></script>
<div id="theme" v-bind:class="picked">
    <span>Chose the color theme you want (works now)</span>
    <br>
    <div>Dark/Light toggle</div>
    <input type="radio" id="dark" value="dark" v-model="picked">
    <label for="dark">Dark</label>
    <br>
    <input type="radio" id="light" value="light" v-model="picked">
    <label for="light">Light</label>
    <br><br>
    <span>Current Mode: {{ picked }}</span>
</div>

如果您需要更改父组件的视图（条件），您可以npm install vuex --save通过共享存储连接并响应更改视图，就像现在使用 data.picked 一样。

推荐阅读