vue estilo de encuadernación de varias maneras

estilo de encuadernación vue (API chino: https://www.runoob.com/vue2/vue-class-style.html )

sintaxis de objetos

1.v-bind: clase estableció un, cambio de clase dinámica objeto

<Div: class = " { 'Activo': isActive }"> XXX </ div>  si la función de estilo, de acuerdo con el valor booleano es cierto si isActive

clase 2.:class puede coexistir

<Div class = "estática": class = " { 'Activo': isActive, 'error': el isError }"> XXX </ div> 
Cuando isActive es cierto, isError es falso, y estilos para isActive estática. 
Cuando isActive es falsa, isError es cierto, y como estática estilo isError. 
Cuando isActive es cierto, el isError es cierto, y como estática estilo isActive, isError

3 .: clase se puede unir datos de objetos

<Div class = "estático": class = "classObj"> XXX </ div> 
predeterminado de exportación { 
  Data () { 
    retorno { 
      classObj : {// se puede unir directamente a un objeto, el objeto que tiene una pluralidad de estilos 
        activos: true, 
        de error: false
       } 
    } 
  } 
}

 

la sintaxis de matrices

4.v-bind: clase proporciona una matriz 

Usando un conjunto de datos necesarios para especificar el cambio de nombre

 

<Div class = "estática": class = "[activeCls, errorCls]"> XXX </ div> 
predeterminado de exportación { 
  Datos () { 
    retorno { 
      activeCls : 'activo', // div style en el patrón activo correspondiente al cambio de nombre es activeCls 
      errorCls: 'error'
     } 
  } 
} 
<style> 
    .active { XXX } 
    .Error { XXX } 
</ style>

 

5. ternarios con expresiones

<Plantilla> 
  <div lo anterior Identificación del mencionado = "App"> 
    <div class = "estática": class = "[isActive activeCls :? errorCls, BaseClass]"> xxx </ div> 
  </ div> 
</ Plantilla> 
<script> 
Exportación predeterminado { 
  datos () { 
    retorno { 
      isActive : verdaderos, 
      activeCls: 'activo', // isActive cuando es verdadero, los activeCls estilo correspondiente realiza activa y ejecuta un estilo correspondiente BaseClass BaseClass 
      errorCls: 'error', cuando // cuando el valor isActive es falsa, realiza errorCls patrón de error correspondientes correspondiente al patrón y realiza BaseClass BaseClass 
      BaseClass: 'BaseClass'
     } 
  } 
} 
</ script> 
<style restringidos> 
.activa { 
  fondo : rojo ;
} 
.Error { 
  de color : blanco ; 
} 
.Baseclass { 
  text-align : centro ; 
} 
</ Style>

 

Un triplete de expresiones

<Div class = "cupón-img": class = "[item.ticket_type == 1 'treinta y yuan:? 'Cincuenta yuanes']">

 

6. sintaxis array utiliza en sintaxis de objetos

Rojo ; 
} 
.baseclass
    { 
  Text-align : centro ; 
} 
</ Style>

 

7. La definición de una serie de diferentes patrones adquirieron a través de diferentes valores de índice

<Div class = "icono": class = "ClassMap [support.type]"> </ div> 
    Creación () { 
      this.classMap = [ "Reducir", "Garantía" "descuento", "Factura", "Especial "]
     } , 
    de acuerdo con la matriz de cambio support.type, el patrón de índice correspondiente a ClassMap

 

estilo en línea de unión

<div id = "aplicación"> 
    <div: style = " { de color : cl, fondo: bk } ">?你好吗</ div> </ div> 
<script> 
    nueva Vue ( { 
        EL : '#app' , 
        los datos: { 
            cl: 'rojo', 
            bk: 'amarilla'
         } 
    }) 
</ script>

 

Se unen directamente a un objeto de estilo, de modo que una plantilla más claro:

<div id = "aplicación"> 
        <div: style = "testObj">你好吗</ div>? 
</ div> 
<script> 
    nueva Vue ( { 
        EL : '#app', 
        de datos: { 
            testObj: { 
                colores : rojo , 
                fondo : amarillo ; 
            } 
        } 
    }) 
</ script>