The difference between vue2 and vue3 about the binding of class class and the binding of style

This article is a personal note

1. The difference between the binding of the class class

vue2: For vue2, all class bindings are based on object {}

Example: single class binding

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

Multiple class bindings:

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

 

 Vue3: The class binding of vue3 is based on the array []

Example: single binding

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

 multiple bindings

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

 2. For style binding

Vue2 and vue3 have no change in the binding of style, both are based on object {}

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