Vue3挂载元素不响应class样式问题解决，重整样式绑定Vue3挂载元素不响应class样式问题解决,顺便重整Vue3

一、样式问题

问题描述：点击按钮，要增加class="xz180" 属性。在Vue顶层mount元素上无效。

其中，id="posBox" 是VUE框架挂载的目标元素。

Vue.createApp(配置).mount('#posBox')

解决问题：增加一层元素供mount挂载。经过对比子元素可以解析，说明是顶层mount元素不在VUE作用范围？! 或者说VUE作用范围为 mount元素内。

<div id="app">
    <div id="posBox" :class="{ xz180:isXZ }">
       ...其他代码
    </div>
</div>

<script>
Vue.createApp(配置).mount('#app')
<script>

官方文档的样式绑定写得非常绕口，借这个机会梳理 一眼就看懂的写法

目标样式:

<div class="A  B" >  内容 </div>

VUE:
<div v-bind:class="样式对象/数组">  内容 </div>  
<div       :class="样式对象/数组">  内容 </div>

二、Object绑定对象的样式用法

写法1 v-bind:class="{ A: isA, B: isB}"

VUE模版:
<div class="A  B">
<div v-bind:class="{ A: isA, B: isB}">写法一 HTML看得到样式名 A  B

响应数据:
{
    isA:true,  //写法一
    isB:true,

}

写法2 v-bind:class="对象"

VUE模版:
<div class="A  B">
<div v-bind:class="isAB">写法二 HTML看不到样式名

响应数据:
{
    isAB:{   //写法二
        A:true,
        B:true,
    },
}

写法3 计算属性* 官方说常见但有用！

这例子搞复杂了

😊改进:

VUE模版:
<div class="A  B">
<div v-bind:class="计算函数">

响应数据(注意是computed 非data中):
computed: {     
    计算函数(){
        return {
            A: 5>3  && 3>2 ,
            B: false || true ,
        }
    }
}

三、Array绑定数组的样式用法

看官方文档真的把人绕晕了，主要问题时 混合式写法，名字又臭又长

😊改进:

VUE模版:
<div class="A  B">
<div v-bind:class="[变量, 变量]"></div>
<div v-bind:class="[isA, isB]"></div>

响应数据:
{
    isA:'A', 
    isB:'B',
}

四、对比Object、Array写法优势

总的来说，写成对象的形式好过数组，第二种写法用一个对象承接变量更易于维护，唯一缺陷是样式隐藏到了数据中。

如果样式比较少，我会直接采用第一种写法，比数组写法可以更直观看到样式。

目前认为Object>Array更适配,这样看来数组的场景使用比较少。实际使用需要根据项目来权衡设计。