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

Question

I'm making a page color toggle for my website and I want to change from using two different radio buttons to a div that you click to toggle the color. I also need the text in the div to change:

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>

Answer 1

You shouldn't work with DOM directly, this is no vue way.

Try to wrap your elements with a class bound to your picked property:

 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>

If you need to change the view (condition) of the parent component, you can connect npm install vuex --save and reactively change the view via shared storage just like now using data.picked.