Pesquisa de site

Como usar vínculos de estilo e classe no Vue.js

Introdução

Neste artigo, você aprenderá sobre estilos dinâmicos e associações de classe no Vue.js. Com a diretiva v-bind:style, você visualizará o tamanho da fonte em um evento click. Com v-bind:class, você observará como aplicar várias classes aos elementos.

Embora isso seja possível com a manipulação do DOM, o Vue.js permite que você renderize dinamicamente estilo e classes com linhas de código concisas e tira proveito de sua estrutura de modelo de dados.

Estilos de encadernação dinamicamente

Vamos desenvolver uma maneira no Vue.js de aumentar ou diminuir o tamanho da fonte com base na entrada do usuário. Para este fim, o Vue nos fornece a diretiva v-bind:style.

Dentro de seu arquivo App.js, instancie uma instância Vue e inclua seu modelo de dados:

data() {
  return {
    fontSize: 10
  }
}

Crie dois botões em seu arquivo index.html e um parágrafo que aceite a diretiva v-bind:style:

<button v-on:click="fontSize++">
  Increase font size
</button>
<button v-on:click="fontSize--">
  Decrease font size
</button>

<p v-bind:style="{ fontSize: fontSize + 'px' }">
  Font size is: {{ fontSize }}
</p>

Em cada evento click, a diretiva v-bind:style aumenta e diminui o valor da sua variável fontSize. Isso anexa o valor de fontSize à propriedade CSS font-size.

Se necessário, adicione vários objetos de estilo à diretiva v-bind:style. Em seu arquivo App.js, inclua os objetos de estilo da seguinte forma:

data() {
  return {
      baseStyles: {
      fontWeight:'800',
      color: 'red'
    },
      overrideStyles: {
      color:'blue'
    } 
  }
}

Em seu arquivo index.html, forneça uma matriz dos objetos de estilo:

<p v-bind:style="[baseStyles, overrideStyles]">
  baseStyles and overrideStyles
</p>

Observação: tome cuidado com a ordem de seus objetos de estilo na matriz, pois a lógica dos elementos seguintes substitui os anteriores.

Agora que você revisou as ligações de estilo, vamos considerar as classes dinâmicas no Vue.js.

Ligando classes dinamicamente

A aplicação direta de estilos pode se tornar complexa à medida que os requisitos mudam. Para ajudar com isso, a diretiva v-bind:class fornece uma maneira de vincular classes ao conteúdo de um elemento.

Por exemplo, pode ser necessário sublinhar o texto do elemento e alterar a cor e o peso da fonte.

Embora seja possível implementar com uma ligação de estilo, o Vue.js permite que você inclua desempenho adicional com a diretiva v-bind:class.

Para conseguir isso, crie uma matriz de menuItems e uma variável selected com um valor padrão de Home em seu App.js arquivo:

data() {
  return {
    selected: 'Home',
    menuItems: ['Home', 'About', 'Contact']
  }
}

Em seu arquivo index.html, aplique um loop v-for em uma lista ordenada para percorrer os elementos na matriz menuItems.

Com cada evento de clique, a diretiva v-bind:class atribui o valor da variável selected ao elemento atual em menuItems. Isso permite que você passe várias classes em seu elemento de lista ordenado e adiciona qualquer estilo listado em CSS:

<ul>
  <li v-for="item in menuItems"
    v-on:click="selected = item"
    v-bind:class="{ selected: selected == item}">
      {{item}}
  </li>
</ul>

Você também pode passar várias classes em um array usando a diretiva v-bind:class.

Defina uma matriz de classes em seu modelo de dados no arquivo App.js:

data() {
  return {
    classArray: ['selected', 'underlined']
  }
}

Em seu arquivo index.html, consulte seu classArray usando a diretiva v-bind:class.

<p v-bind:class="[classArray]">
  Multiple classes {{ classArray }}
</p>

Isso aplicará as classes selecionado e sublinhado ao elemento.

Conclusão

O uso do estilo Vue.js e das diretivas de classe mantém as ações dinâmicas em seus elementos e oferece suporte a várias instâncias para um desempenho mais poderoso.

Artigos relacionados: