El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem com enllaçar classes i estils CSS dinàmicament a les nostres plantilles Vue.js. Això ens permetrà aplicar estils de manera condicional i reactiva, millorant la interactivitat i l'experiència d'usuari de les nostres aplicacions.

Enllaços de classes

Enllaç de classes amb objectes

Podem utilitzar objectes per enllaçar classes de manera condicional. La clau de l'objecte és el nom de la classe, i el valor és una expressió booleana que determina si la classe s'ha d'aplicar o no.

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

En aquest exemple:

La classe active s'aplicarà si isActive és true.
La classe text-danger s'aplicarà si hasError és true.

Enllaç de classes amb arrays

També podem utilitzar arrays per enllaçar múltiples classes de manera condicional.

<div v-bind:class="[isActive ? 'active' : '', errorClass]"></div>

En aquest exemple:

La classe active s'aplicarà si isActive és true.
La classe errorClass s'aplicarà sempre que errorClass tingui un valor.

Enllaços d'estils

Enllaç d'estils amb objectes

Podem utilitzar objectes per enllaçar estils de manera dinàmica. La clau de l'objecte és la propietat CSS, i el valor és l'expressió que determina el valor de la propietat.

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

En aquest exemple:

La propietat color s'establirà al valor de activeColor.
La propietat fontSize s'establirà al valor de fontSize seguit de px.

Enllaç d'estils amb arrays

També podem utilitzar arrays per enllaçar múltiples objectes d'estils.

<div v-bind:style="[baseStyles, overridingStyles]"></div>

En aquest exemple:

Els estils de baseStyles s'aplicaran primer.
Els estils de overridingStyles s'aplicaran després, sobreescrivint qualsevol estil conflictiu de baseStyles.

Exemples pràctics

Exemple 1: Enllaç de classes amb objectes

<template>
  <div>
    <button v-bind:class="{ active: isActive }" @click="toggleActive">Toggle Active</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    };
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive;
    }
  }
};
</script>

<style>
.active {
  background-color: green;
  color: white;
}
</style>

Exemple 2: Enllaç d'estils amb objectes

<template>
  <div>
    <p v-bind:style="{ color: textColor, fontSize: fontSize + 'px' }">Text amb estils dinàmics</p>
    <button @click="increaseFontSize">Augmenta la mida del text</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textColor: 'blue',
      fontSize: 14
    };
  },
  methods: {
    increaseFontSize() {
      this.fontSize += 2;
    }
  }
};
</script>

Exercicis

Exercici 1: Enllaç de classes

Crea un component que canviï la classe d'un paràgraf entre highlight i normal quan es faci clic en un botó.

Solució

<template>
  <div>
    <p v-bind:class="{ highlight: isHighlighted }">Aquest és un paràgraf.</p>
    <button @click="toggleHighlight">Canvia el ressaltat</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isHighlighted: false
    };
  },
  methods: {
    toggleHighlight() {
      this.isHighlighted = !this.isHighlighted;
    }
  }
};
</script>

<style>
.highlight {
  background-color: yellow;
}
</style>

Exercici 2: Enllaç d'estils

Crea un component que canviï el color del text i la mida de la font d'un paràgraf quan es faci clic en un botó.

Solució

<template>
  <div>
    <p v-bind:style="{ color: textColor, fontSize: fontSize + 'px' }">Text amb estils dinàmics</p>
    <button @click="changeStyles">Canvia els estils</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textColor: 'black',
      fontSize: 16
    };
  },
  methods: {
    changeStyles() {
      this.textColor = this.textColor === 'black' ? 'red' : 'black';
      this.fontSize = this.fontSize === 16 ? 20 : 16;
    }
  }
};
</script>

Conclusió

En aquest tema, hem après com enllaçar classes i estils de manera dinàmica a les nostres plantilles Vue.js. Hem vist com utilitzar objectes i arrays per aplicar estils de manera condicional i reactiva. Aquests conceptes són fonamentals per crear aplicacions Vue.js interactives i atractives visualment. En el proper tema, explorarem la renderització condicional per mostrar o amagar elements basant-nos en condicions específiques.

Enllaços de classes i estils

Continguts

Enllaços de classes

Enllaç de classes amb objectes

Enllaç de classes amb arrays

Enllaços d'estils

Enllaç d'estils amb objectes

Enllaç d'estils amb arrays

Exemples pràctics

Exemple 1: Enllaç de classes amb objectes

Exemple 2: Enllaç d'estils amb objectes

Exercicis

Exercici 1: Enllaç de classes

Solució

Exercici 2: Enllaç d'estils

Solució

Conclusió

Curs de Vue.js

Mòdul 1: Introducció a Vue.js

Mòdul 2: Conceptes bàsics de Vue.js

Mòdul 3: Components de Vue.js

Mòdul 4: Vue Router

Mòdul 5: Gestió d'estat amb Vuex

Mòdul 6: Directives de Vue.js

Mòdul 7: Plugins de Vue.js

Mòdul 8: Proves en Vue.js

Mòdul 9: Conceptes avançats de Vue.js

Mòdul 10: Construcció i desplegament d'aplicacions Vue.js

Mòdul 11: Projectes de Vue.js del món real