calss
使用v-bind:calss进行元素类的绑定,简写为:calss,其中类的绑定方式有两种:
第一 以对象的形式进行绑定
第二 以数组的形式进行绑定
<template>
<div :class="{active:isActive}">对象形式绑定class</div>
<div :class="[error]">数组形式绑定class</div>
</template>
<script>
export default {
setup() {
const isActive=true
const error="errorClass"
return{
isActive,
error
}
},
}
</script>
当然这两种方式也可以混合使用
style
使用v-bind:calss进行元素类的绑定,简写为:style,其中类的绑定方式有两种:
第一 以对象的形式进行绑定
第二 以数组的形式进行绑定
<div :style="{color:isColor}">对象形式绑定style</div>
<div :style="[fontSize]">数组形式绑定style</div>
const isColor='red'
const fontSize={
size:'30px',
color:'yellow'
}
总结:
- calss和style都支持对象和数组的语法绑定,不同的是calss的数组绑定的data中数据赋值的是字符串,style数组绑定data中赋值的是个对象,对象里面写css样式,对象绑定的时候,基本上就是JSON那种格式
- class 可以给组件传递,也可以给组件内部的DOM元素传递,在组件内部的DOM元素上使用 :class="$attrs.class"来接收