1. Prefacio
Creo que todos saben que un requisito común para la vinculación de datos es la lista de clases de los elementos de operación y su estilo en línea. Dado que todas son propiedades, podemos manejarlas con v-bind : solo necesitamos calcular la cadena final de la expresión. Sin embargo, el empalme de cuerdas es problemático y fácil de cometer errores. Entonces, Vue.js lo mejora específicamente cuando se usa v-bind para la clase y el estilo. El tipo de resultado de una expresión puede ser un objeto o una matriz además de una cadena.
2. Binde la clase HTML
Tenga en cuenta: aunque puede usar la etiqueta de bigote para vincular la clase, como class="{{ className }}" , no recomendamos este método de escritura y v-bind:class . ¡Solo uno de los dos se puede elegir!
Sintaxis de objetos
Podemos pasar un objeto a v-bind:class para cambiar de clase dinámicamente. Tenga en cuenta que v-bind:class puede coexistir con características de clase ordinarias:
<div v-bind: class = "{'class-a': ISA, 'class-b': isb}"> </div> Datos: {Isa: True, ISB: False}Renderizado como:
<div> </div>
Cuando cambian ISA e ISB, la lista de clases se actualizará en consecuencia. Por ejemplo, si el ISB se hace verdadero, la lista de clases se convertirá en " static class-a class-b ".
También puede unir directamente un objeto en los datos:
<div v-bind: class = "classObject"> </div>
Data: {classObject: {'class-a': true, 'class-b': false}}También podemos vincular una propiedad calculada que devuelve el objeto aquí. Este es un modo común y potente.
Sintaxis de la matriz
Podemos pasar una matriz a v-bind:class para aplicar una lista de clases:
<div v-bind: class = "[classa, classb]">
Datos: {ClassA: 'Class-A', ClassB: 'Class-B'}Renderizado como:
<div> </div>
Si también desea cambiar la clase en la lista de acuerdo con las condiciones, puede usar una expresión ternaria:
<div v-bind: class = "[classA, ISB? ClassB: '']">
Este ejemplo siempre agrega clase, pero claseB solo si ISB es verdadero.
2. Atar estilos en línea
Sintaxis de objetos
La sintaxis del objeto de v-bind:style es muy intuitiva: se ve muy similar a CSS, pero en realidad es un objeto JavaScript. Los nombres de los atributos CSS pueden ser nombrados por CamelCase o separación horizontal corta (Kebab-Case):
<div v-bind: style = "{color: activecolor, fontSize: fontSize + 'px'}"> </div> Datos: {ActiveColor: 'Red', FontSize: 30}Por lo general, es mejor unirse directamente a un objeto de estilo, deja la plantilla más clara:
<div v-bind: style = "styleObject"> </div>
Datos: {styleObject: {color: 'rojo', fontSize: '13px'}}Del mismo modo, la sintaxis del objeto a menudo se usa junto con las propiedades calculadas del objeto devuelto.
3. Sintaxis de matriz
v-bind:style puede aplicar múltiples objetos de estilo a un elemento:
<div v-bind: style = "[styleObjecta, styleObjectb]">
Agregue automáticamente prefijos
Cuando v-bind:style utiliza atributos CSS que requieren prefijos de proveedores, como Transform, Vue.js detectará y agregará automáticamente el prefijo correspondiente.
4. Resumen
Lo anterior es todo el contenido de Vue.js Binding Class and Style Styles compilados para usted. El artículo se introduce en detalle y tiene cierto valor de aprendizaje de referencia. Espero que sea útil para todos aprender vue.js. El editor también actualizará información sobre Vue.js uno tras otro. Amigos interesados, continúe prestando atención a Wulin.com.