Description
The use of class and style is a bit similar, pay attention to discrimination
Use class
There are 3 formats for using class binding:
- String
- Array
- Object
<template>
<div :style="classString">
字符串形式
</div>
<div :style="classObject">
对象形式
</div>
<div :style="classArray">
数组形式
</div>
</template>
data() {
return {
classString: 'red',
classObject: {
red: false, green: true },
classArray: ['red', 'green', {
brown: false}]
}
},
Use style
There are two formats that use style binding:
- String
- Object
<template>
<div :style="classString">
字符串形式
</div>
<div :style="classObject">
对象形式
</div>
<template>
data() {
return {
styleString: 'background: orange',
styleObject: {
color: 'orange',
background: 'yellow'
}
}
},
The child component uses the style defined by the parent component
The template part in the parent component
<template>
<div>
<child :class="styleString"/>
</div>
<template>
The data part in the parent component
data() {
return {
styleString: 'background: orange'
}
},
The template part in the child component
<template>
<div>
<div :class="$attrs.class">one</div>
<div :class="$attrs.class">two</div>
</div>
<template>
Please like and follow