Vue 3 添加反应性类来挂载元素答案

【问题标题】：Vue 3 add reactivity classes to mount elementVue 3 添加反应性类来挂载元素
【发布时间】：2021-03-17 00:08:05
【问题描述】：

如何在 Vue 3 中添加响应类来挂载组件，例如 #app？

App.vue 中的 Vue 2

<div id="app" :class="{ 'nav-open': nav, 'tools-open': tools}">
...
</div>

【问题讨论】：

标签： vuejs3

【解决方案1】：

是的，所以 v3 不允许您拥有顶级属性响应式。您可以嵌套div 并以这种方式控制它。或者，您可以使用一些 vanilla js 来查找父元素并切换类，并通过监视（或计算）启动更改

这是一个使用document.getElementById("app").classList的示例

Vue.createApp({
  setup() {
    const setAppClass= ()=>{
      if(top.value){
        document.getElementById("app").classList.add("top");
      } else {
        document.getElementById("app").classList.remove("top");
      }
    }
    const nested = Vue.ref(true);
    const top = Vue.ref(true);
    Vue.watch([top], ()=> {
        setAppClass();
    })
    setAppClass();

    return {nested, top};
  }
}).mount('#app')

div{
  border-left: 6px solid transparent;
  padding: 0.2em;
}
.nested{
  border-color: blue;
}
.top{
  border-color: tomato;
}

<script src="https://unpkg.com/vue@3.0.7/dist/vue.global.prod.js"></script>

<div id="app" >
  <div :class={nested:nested}>
    <label><input type="checkbox" v-model="nested"> nested</label>
    <label><input type="checkbox" v-model="top"> top</label>
  </div>
</div>

【讨论】：