Escribir estilos en vue (enlazar estilos en línea)

El estilo en línea de vue también se divide en sintaxis de objeto y sintaxis de matriz.

No importa qué tipo de clase de enlace o enlace en línea, sus estilos se dividen en objetos o matrices.

La barrera de matrices u objetos utiliza datos en vue para realizar una transición: es decir, para lograr el propósito de las vistas basadas en datos.

Nota: v-bind: aunque la sintaxis del estilo es muy similar a la sintaxis CSS, en realidad existe como un objeto javascript. Al nombrar, use la nomenclatura de mayúsculas y minúsculas. Si usa la nomenclatura de guiones, debe incluir el nombre entre comillas.

1. Sintaxis del objeto

//一种：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
    
    
  activeColor: 'red',
  fontSize: 30
}
//第二种也是可以生效的：
 <div
    class="button_container"
    :style="{color:'red',fontSize:'25px'}"
  >
    凡夫俗子
  </div>
//第三种直接绑定一个样式对象通常会更好，会让模板更加的清晰
<div v-bind:style="styleObject"></div>
data: {
    
    
  styleObject: {
    
    
    color: 'red',
    fontSize: '13px'
  }
}
//第四种就是搭配计算属性用了
<div v-bind:style="styleObject"></div>
data: {
    
    
  activeColor: 'red',
  fontSize: 30
}
 computed: {
    
    
      styleObject: function() {
    
    
          return {
    
    
              color: this.activeColor,
              fontSize: this.fontSize
          }
      }
  }

2. Sintaxis de matriz

La sintaxis de matriz puede aplicar varios objetos de estilo al mismo elemento

<div v-bind:style="[baseStyles, overridingStyles]"></div>