Descripción
El uso de clase y estilo es un poco similar, presta atención a la discriminación.
Clase de uso
Hay 3 formatos para usar el enlace de clases:
- Cuerda
- Formación
- Objeto
<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}]
}
},
Usa estilo
Hay dos formatos que utilizan el enlace de estilo:
- Cuerda
- Objeto
<template>
<div :style="classString">
字符串形式
</div>
<div :style="classObject">
对象形式
</div>
<template>
data() {
return {
styleString: 'background: orange',
styleObject: {
color: 'orange',
background: 'yellow'
}
}
},
El componente hijo usa el estilo definido por el componente padre
La parte de la plantilla en el componente principal
<template>
<div>
<child :class="styleString"/>
</div>
<template>
La parte de datos en el componente principal
data() {
return {
styleString: 'background: orange'
}
},
La parte de la plantilla en el componente secundario
<template>
<div>
<div :class="$attrs.class">one</div>
<div :class="$attrs.class">two</div>
</div>
<template>
Por favor, me gusta y sigue