listas de clases y elemento de mando de estilo en línea es una demanda común para el enlace de datos. Debido a que son propiedad, para que puedan ser procesados con v-bind. Sin embargo, la cadena engorroso concatenación y propenso a errores, y por lo tanto, cuando el v-bind para el manejo de la clase y el estilo, Vue hacer unas mejoras especiales, además del tipo de expresión es el resultado de una cadena, sino que también pueden ser objetos o matrices.
Solución produce abrazaderas dobles vue {} {} en de:
<style> [v-cloak] { display: none; } </style> <div v-cloak>{{message}}</div>
clase:
la sintaxis del objeto:
Se puede transmitir a v-bind: objeto de clase.
<div v-bind:class="{ active: isActive }"></div>
presencia activa o ausencia de esta clase dependen del atributo de datos isActive es verdadera o falsa.
En más propiedades se puede hacer pasar de forma dinámica de conmutación de una pluralidad de clase de objeto. Además, v-bind: los comandos de clase pueden coexistir con atributo de clase convencional.
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
data: {
isActive: true,
hasError: false
}
//渲染为：
<div class="static active"></div>
Vinculantes objetos de datos no tienen que definirse en línea en una plantilla:
<div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,
'text-danger': false
}
}
El objeto devuelto también se puede unir una propiedad calculada:
<div v-bind:class="classObject"></div>
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
la sintaxis de matrices:
Se puede pasar a una serie de v-bind: clase, para solicitar una lista de clase.
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
//渲染为：
<div class="active text-danger"></div>
También puede utilizar la sintaxis de objeto en la sintaxis de matrices:
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
Utilizado en el montaje:
Cuando el atributo de clase en un componente personalizado esa clase se añadirá al elemento raíz del conjunto anterior.
Si el mismo tipo está presente, en una clase de categoría personalizada anula los componentes en el elemento raíz del montaje.
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})
<my-component class="baz boo"></my-component>
//渲染为：
<p class="foo bar baz boo">Hi</p>
estilo:
Cuando el v-bind: Cuando tenga que añadir estilo a utilizar el navegador propiedades CSS prefijo del motor, tales como la transformación, Vue.js detectará y añadir el prefijo apropiado automáticamente.
la sintaxis del objeto:
v-bind: estilo de sintaxis objeto es muy intuitivo, es un objeto de JavaScript. nombre de la propiedad CSS puede ser separado por guiones o camello (entre comillas) se llama:
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
plantilla de la unión directa será más clara en un objeto de estilo:
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
Objeto Sintaxis propiedades de uso calculado a menudo combinados del objeto devuelto.
la sintaxis de matrices:
v-bind: estilo de sintaxis array se puede aplicar a una pluralidad de un mismo elemento objeto de estilo:
<div v-bind:style="[baseStyles, overridingStyles]"></div>
Los valores múltiples:
A partir de 2.3.0 en adelante puede proporcionar propiedades de unión al estilo de una matriz con múltiples valores, que se utiliza para proporcionar más valor prefijadas, escribir sólo el último valor de la matriz para hacer un navegador compatible.
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
