vuejs3 - Vue 3 添加反应性类来挂载元素

Question

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

Vue 2 在App.vue

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

标签： vuejs3

Answer 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>