Vue3 Enlace de estilos

Vue.js class

class y style son atributos de los elementos HTML, utilizados para establecer el estilo de los elementos. Podemos usar v-bind para establecer los atributos de estilo.

Al manejar class y style, v-bind permite que la expresión no solo sea una cadena, sino también un objeto o un array.

v-bind:classSe puede abreviar a:class。

Enlace del atributo class

Podemosv-bind:classestablecer un objeto, alternando así dinámicamenteclass:

Ejemplo 1

En el ejemplo, establecer isActive en true muestra un bloque div verde; si se establece en false, no se muestra:

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

Pruébalo »

El resultado de renderizado del div class en el ejemplo anterior es:

<div class="active"></div>

También podemos pasar más propiedades en el objeto para alternar dinámicamente múltiples classes.

Además,:classLa directiva también puede coexistir con el atributo class normal.

Ejemplo 2

El color de fondo de la clase text-danger anula el color de fondo de la clase active:

<div class="static" :class="{ 'active' : isActive, 'text-danger' : hasError }"> </div>

Pruébalo »

El resultado de renderizado del div class en el ejemplo anterior es:

<div class="static text-danger"></div>

Cuando isActive o hasError cambian, el valor del atributo class se actualizará en consecuencia. Por ejemplo, si el valor de active es true, la lista de class se convertirá en "static active text-danger".

También podemos enlazar directamente un objeto de los datos:

Ejemplo 3

El color de fondo de la clase text-danger anula el color de fondo de la clase active:

<div id="app"> <div class="static" :class="classObject"></div> </div>

Pruébalo »

El resultado de renderizado del Ejemplo 3 es el mismo que el del Ejemplo 2.

Además, también podemos enlazar aquí una propiedad computada que devuelve un objeto. Este es un patrón común y potente:

Ejemplo 4

data() { return { isActive: true, error: null } }, computed: { classObject() { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal' } } }

Pruébalo »

Sintaxis de array

Podemos pasar un array av-bind:class, el ejemplo es el siguiente:

Ejemplo 5

<div class="static" :class="[activeClass, errorClass]"></div>

Pruébalo »

El resultado de renderizado del div class en el ejemplo anterior es:

<div class="static active text-danger"></div>

También podemos usar una expresión ternaria para alternar las classes de la lista:

Ejemplo 6

errorClass siempre está presente; cuando isActive es true, se añade la clase activeClass:

<div id="app"> <div class="static" :class="[isActive ? activeClass : '', errorClass]"></div> </div>

Pruébalo »

El resultado de renderizado del div class en el ejemplo anterior es:

<div class="static text-danger"></div>

Vue.js style (estilos en línea)

Podemos, env-bind:styleestablecer estilos directamente, se puede abreviar a:style：

Ejemplo 7

<div id="app"> <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">Ejemplo</div> </div>

Pruébalo »

El resultado de renderizado del div style en el ejemplo anterior es:

<div style="color: red; font-size: 30px;">Ejemplo</div>

También se puede enlazar directamente a unobjeto de estilo, para que la plantilla sea más clara:

Ejemplo 8

<div id="app"> <div :style="styleObject">Ejemplo</div> </div>

Pruébalo »

v-bind:styleSe puede usar un array para aplicar varios objetos de estilo a un elemento:

Ejemplo 9

<div id="app"> <div :style="[baseStyles, overridingStyles]">Ejemplo</div> </div>

Pruébalo »

Nota: cuandov-bind:styleal usar propiedades CSS que requieren un prefijo específico, como transform, Vue.js detecta automáticamente y añade el prefijo correspondiente.

Múltiples valores

Se puede proporcionar a la propiedad en el enlace de style un array que contenga múltiples valores, a menudo usado para proporcionar varios valores con prefijo, por ejemplo:

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

Esta escritura solo renderizará el último valor del array que sea compatible con el navegador. En este ejemplo, si el navegador es compatible con flexbox sin prefijo de navegador, solo se renderizará display: flex.

Uso del atributo class en componentes

Cuando usas el atributo class en un componente personalizado con un solo elemento raíz, estas classes se añadirán a ese elemento. Las classes existentes en ese elemento no se sobrescribirán.

Ejemplo 10

<div id="app"> <ejemplo class="classC classD"></ejemplo> </div> <script>// Crear una aplicación Vue const app = Vue.createApp({}) // Definir un nuevo componente global llamado ejemplo app.component('ejemplo', { template: '<h1 class="classA classB">I like ejemplo!</h1>' }) app.mount('#app') </script>

Pruébalo »

El resultado de renderizado del div class en el ejemplo anterior es:

<h1 class="classA classB classC classD">I like ejemplo!</h1>

Esto también aplica para class con enlace de datos:

<my-component :class="{ active: isActive }"></my-component>

Cuando isActive es true, el HTML se renderizará como:

<p class="active">Hi</p>

Si tu componente tiene múltiples elementos raíz, necesitas definir qué partes recibirán esta clase. Puedes usar$attrsel atributo del componente para hacer esto:

Ejemplo 11

<div id="app"> <ejemplo class="classA"></ejemplo> </div> <script> const app = Vue.createApp({}) app.component('ejemplo', { template: ` <p :class="$attrs.class">I like ejemplo!</p> <span>Este es un componente hijo</span> ` }) app.mount('#app') </script>

Pruébalo »

Nota: en template,`se usan comillas invertidas, no comillas simples.'。

El resultado de renderizado del div class en el ejemplo anterior es:

<div id="app" data-v-app=""><p class="classA">I like ejemplo!</p><span>这是一个子组件</span></div>

Otras extensiones