Vue junto con el estilo de aprendizaje en línea de la unión

propiedad de clase

Bird encontró un fragmento de código de un tutorial, fácil confundir
el estilo de estilo añadido:

.active {
	width: 100px;
	height: 100px;
	background: green;
}
.text-danger {
	background: red;
}

Agregue el código en el cuerpo:

<div id="app">
  <div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
	hasError: true
  }
})
</script>

Resultados Figura:

• ¿Por qué empezar una cubierta verde rojo muy enredado y probado muchos métodos, recordó de pronto el " principio de proximidad " y, a continuación, traté de cambiar mi estilo de estilo secuencial, el resultado fue un éxito. ( Principiante debe prestar atención a )

---

Además, cuando vue por clase ajuste, puede también pasar a través del valor del objeto de
ciertas aves tutorial decir:

<div v-bind:class="classObject"></div>

new Vue({
  el: '#app',
  data: {
    classObject: {
      active: true,
      'text-danger': true
    }
  }
})

---

Configuración de la clase Array

//body中
<div v-bind:class="[activeClass, errorClass]"></div>
//script中
new Vue({
  el: '#app',
  data: {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
})

Tipo de clase de las tres yuanes

//body中
<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
//script中
new Vue({
  el: '#app',
  data: {
    isActive: true,
	activeClass: 'active',
    errorClass: 'text-danger'
  }
})

estilo de montura

1. estilo de ajuste normal

//body内
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">教程</div>

//script内
new Vue({
  el: '#app',
  data: {
    activeColor: 'green',
	fontSize: 30
  }
})

2. conjunto estilo único objeto de estilo

//body内
 <div v-bind:style="styleObject">教程</div>
//script内
new Vue({
  el: '#app',
  data: {
    styleObject: {
      color: 'green',
      fontSize: '30px'
    }
  }
})

3. Más estilo conjunto de objetos de estilo

//body内
 <div v-bind:style="[baseStyles, overridingStyles]">教程</div>
 //script内
 new Vue({
  el: '#app',
  data: {
    baseStyles: {
      color: 'green',
      fontSize: '30px'
    },
	overridingStyles: {
      'font-weight': 'bold'
    }
  }
})

Nota : Cuando el v-bind: estilo cuando se utiliza un prefijo específico propiedades CSS requiere, tales como la transformación, Vue.js detectará y añadir los prefijos adecuados automáticamente.