Um requisito comum para a ligação de dados é a lista de classe dos elementos de operação e seu estilo embutido. Como todos são atributos, podemos lidar com eles com V-Bind: basta 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 o 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.
Vincular a classe html
Embora você possa usar a tag de bigode para ligar a classe, como `{ % RAW %} class =" {{ClassName}} "{ % endraw %}`, 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 classe V-Bind: para alternar a classe dinamicamente. Observe que a diretiva 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á "estática classe A Classe A".
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 classe V-Bind: 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.
No entanto, escrever dessa maneira é um pouco pesado quando existem várias classes condicionais. Em 1.0.19+, a sintaxe do objeto pode ser usada na sintaxe da matriz:
<div v-v-bind: class = "[Classa, {ClassB: ISB, ClassC: ISC}]">
Vincular estilos embutidos
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-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.
Sintaxe da matriz
V-Bind: a sintaxe da matriz do estilo 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.
Este artigo foi compilado no "Tutorial de aprendizado de componentes de front-end Vue.js", e todos são convidados a aprender e ler.
Para tutoriais nos componentes vue.js, clique no tutorial de aprendizado de componentes do Tópico Especial Vue.js para aprender.
Para mais tutoriais de aprendizado de Vue, leia o tópico especial "Vue Practical Tutorial"
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.