1. Prefácio
Acredito que todo mundo sabe que um requisito comum para a ligação de dados é a lista de elementos de operação e seu estilo embutido. Como são todas propriedades, podemos lidar com elas com v-bind : só precisamos calcular a sequência final da expressão. No entanto, a emenda de cordas é problemática e fácil de cometer erros. Portanto, o vue.js o aprimora especificamente quando v-bind é usado para classe e estilo. O tipo de resultado de uma expressão pode ser um objeto ou uma matriz, além de uma string.
2. Bind HTML Class
Observação: embora você possa usar a tag de bigode para ligar a classe, como class="{{ className }}" , não recomendamos este método de escrita e v-bind:class Apenas um dos dois pode ser escolhido!
Sintaxe do objeto
Podemos passar um objeto para a v-bind:class para alternar a classe dinamicamente. Observe que v-bind:class pode coexistir com os recursos da classe comum:
<div v-v-bind: class = "{'classe-a': isa, 'classe-b': isb}"> </div> Dados: {Isa: true, ISB: false}Renderizado como:
<div> </div>
Quando ISA e ISB mudam, a lista de classe será atualizada de acordo. Por exemplo, se o ISB se tornar verdadeiro, a lista de classes se tornará " static class-a class-b ".
Você também pode vincular diretamente um objeto nos dados:
<div v-v-bind: class = "ClassObject"> </div>
Dados: {ClassObject: {'class-a': true, 'classe-b': false}}Também podemos vincular uma propriedade calculada que retorna o objeto aqui. Este é um modo comumente usado e poderoso.
Sintaxe da matriz
Podemos passar uma matriz para a v-bind:class para aplicar uma lista de classe:
<div v-v-bind: class = "[Classa, Classb]">
Dados: {Classa: 'Class-A', ClassB: 'Class-B'}Renderizado como:
<div> </div>
Se você também deseja mudar a classe na lista de acordo com as condições, pode usar uma expressão ternária:
<div v-v-bind: class = "[Classa, ISB? Classb: '']">>
Este exemplo sempre adiciona classe, mas Classb somente se o ISB for verdadeiro.
2. Ligue os estilos em linha
Sintaxe do objeto
A sintaxe do objeto de v-bind:style é muito intuitiva - parece muito semelhante ao CSS, mas na verdade é um objeto JavaScript. Os nomes de atributos CSS podem ser nomeados por camelcase ou separação horizontal curta (case de kebab):
<div v-bind: style = "{color: ActiveColor, fontsize: fontsize + 'px'}"> </div> Dados: {ActiveColor: 'Red', Fontsize: 30}Geralmente é melhor se ligar diretamente a um objeto de estilo, tornando o modelo mais claro:
<div v-bind: style = "styleObject"> </div>
Dados: {StyleObject: {color: 'Red', fontsize: '13px'}}Da mesma forma, a sintaxe do objeto é frequentemente usada em conjunto com as propriedades calculadas do objeto retornado.
3. Sintaxe da matriz
v-bind:style pode aplicar vários objetos de estilo a um elemento:
<div v-v-bind: style = "[styleObjecta, styleObjectb]">
Adicione automaticamente prefixos
Quando v-bind:style usa atributos CSS que requerem prefixos de fornecedores, como o Transform, o Vue.js detectará e adicionará automaticamente o prefixo correspondente.
4. Resumo
O exposto acima é o conteúdo inteiro dos estilos de classe e estilo de ligação vue.js compilados para você. O artigo é introduzido em detalhes e possui certo valor de aprendizado de referência. Espero que seja útil para todos aprenderem Vue.JS. O editor também atualizará informações sobre o vue.js um após o outro. Amigos interessados, continue prestando atenção ao wulin.com.