Vue的class、style绑定

    Vue中的样式也要回到原始的BOM+DOM+js的前端组合去解读。

1、当模板直接引用style中定义的样式时，在HTML模板中按照正常的样式引用处理即可。

模板定义：<template>
<div class="sizeclass">100</div>
</template><style>
.sizeclass {text-align: center;font-size: large;
}
</style>

2、当需要根据响应式状态改变模板中引用的class、style时，需要利用计算属性改变样式的引用

既然可以动态改变class，那么HTML模板中style属性也是可以动态改变的。都是HTML的属性，style和class没有什么区别，顶多是style要以对象的形式，class以字符串的方式存在。

<script setup lang="ts">import {computed, nextTick, ref} from "vue"const count=ref(0);
const list=ref(["a","b","c"]);
list.value[1]="e";function increment(){count.value++;nextTick();if(count.value>=3){list.value[count.value]="add";}
}//computed attribute
const size=computed(()=>{return list.value.length;
});
// update class by computed attribute, more than one class is also allowed.
const currentClass=computed(()=>{return list.value.length%2==0 ? "sizeclass" : "smallclass";
});
</script><template>
<button @click="increment">{{ count }}</button>
<div v-for="item in list" :key="item"><span>{{ item }}</span>
</div>
<div :class="currentClass">{{ size }}</div>
</template><style>
.sizeclass {text-align: center;font-size: large;
}.smallclass{text-align: left;font-size: smaller;font-weight: 100;
}
</style>

3、在多个组件嵌套时，HTML模板中的style、class

      当多组件嵌套时，内层组件的样式一定是在外层组件样式的基础上合并计算出来的。回归到BOM+DOM+js的前端，子节点的样式一定是基于父节点的样式上进行生效的。显然Vue也只是一种对前端的重新组合，并不会改变原先DOM下样式的规则。