Un requisito común para el enlace de datos es la lista de clases de los elementos de operación y su estilo en línea. Debido a que todos son atributos, podemos manejarlos con vínculo V: simplemente calcule la cadena final de la expresión. Sin embargo, el empalme de cuerdas es problemático y fácil de cometer errores. Por lo tanto, 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.
Atar la clase HTML
Aunque puede usar la etiqueta de bigote para vincular la clase, como `{ % raw %} class =" {{classname}} "{ % endraw %}`, 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: Clase para cambiar de clase dinámicamente. Tenga en cuenta que la Directiva V-Bind: Class puede coexistir con características de clase ordinarias:
<div v-bind: class = "{'class-a': isa, 'class-b': isb}"> </div> data: {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 "Clase estática A de clase 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: Clase para aplicar una lista de clases:
<div v-bind: class = "[classa, classb]"> Data: {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.
Sin embargo, escribir de esta manera es un poco engorroso cuando hay múltiples clases condicionales. En 1.0.19+, la sintaxis del objeto se puede usar en la sintaxis de la matriz:
<div v-bind: class = "[classa, {classB: ISB, classc: ISC}]">
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> data: {activecolor: 'rojo', 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> data: {styleObject: {color: 'rojo', fontSize: '13px'}}Del mismo modo, la sintaxis del objeto a menudo se usa junto con las propiedades calculadas del objeto devuelto.
Sintaxis de la matriz
V-Bind: La sintaxis de la matriz de 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.
Este artículo ha sido compilado en el "Tutorial de aprendizaje de componentes front-end Vue.js", y todos son bienvenidos a aprender y leer.
Para obtener tutoriales en los componentes Vue.js, haga clic en el tema especial Vue.js Component Learning Tutorial para aprender.
Para obtener más tutoriales de aprendizaje Vue, lea el tema especial "Vue Practical Tutorial"
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.