vue2和vue3关于class类的绑定以及style的绑定的区别

本篇为个人笔记

1.对于class类的绑定的区别

vue2:对于vue2而言，所有类的绑定都是基于对象{}来进行的

例如：单个类绑定

<div :class="{active:isActive}"></div>

多个类绑定：

<div :class="{active,hasError,test1,test2,me:isMe}"></div>

 

 vue3:vue3的类绑定是基于数组[]来进行的

例如：单个绑定

<div :class="[isActive?'active':'']"></div>

 多个绑定

<div :class="['a','b','c',IsError?'hasError':'',IsMe?'d':'e']"></div>

 2.对于style的绑定

vue2和vue3对于style的绑定没有变化，都是基于对象{}

<div :style="{color:'red'}"></div>
或者
<div :style="styleObj"></div>


vue2中：
data(){
    return{
        styleObj:{
            color:'red'
        }
    }
}

vue3中：
<script setup lang="ts">
    let styleObj = {
            color:'red'
    }
</script>