clase se unen v-bind o el estilo de la gramática básica

v-bind clase de unión

Una manera: sintaxis de objetos

Significado de la sintaxis de objetos es: atrás con una clase de objeto

<H2: class = "{类 名 1: valor1, 类 名 1: valor2}"> {{mensaje}} </ h2>

Un uso: directamente mediante la unión de una clase {}
 <h2: class = "{ '
 activo': isActive}"> Hello World </ h2>
Uso II: también se puede determinar mediante, pasando una pluralidad de valores
<H2: class = "{ 'activa': isActive, 'línea': isLine}"> Hello World </ h2>

Utilizar tres: existen las clases ordinarias, no en conflicto
NOTA: Si isActive y isLine son verdaderas, entonces hay título / activo / Line tres clases
 <h2 class = "title": class = "{ 'activa': isActive, 'línea': isLine}"> Hello World < / h2>

Uso de cuatro: si es demasiado complejo, puede ser colocado en un métodos o calculado
Nota: las clases es un atributo calculado
<H2 class = "title": class = "clases"> Hello World </ h2>

manifestación

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "UTF-8">
  <Title> Título </ title>
  <Style>
    .active {
      color rojo;
    } 
　　.Line { 
　　　　border-bottom: 1px solid # 000; 
　　}
   </ Style>
</ Head>
<Body>

<Div id = "aplicación">
  <H2 class = "título" v-bind: class = "{activo: isActive, línea: isLine}"> {{mensaje}} </ h2>
  <H2 class = "título" v-bind: class = "changeClass ()"> {{mensaje}} </ h2>
  <Botón de V en: click = "btnClick"> 按钮 </ botón>
</ Div>

<Script src = "../ js / vue.js"> </ script>
<script> 
  aplicación const = nueva Vue ({
    el: '#app' ,
    Datos: {
      el mensaje: 'Ata a la clase se unen' ,
      isActive: verdad ,
      isLine: verdadera
    },
    métodos: {
      btnClick () {
         este .isActive =! este .isActive
      },
      changeClass () {
         retorno {activa: esta .isActive, la línea: este .isLine}
      }
    }
  })
</ Script>
</ Body>
</ Html>

Segunda manera: la sintaxis de matrices

Significado sintaxis matriz es: con el dorso de clase es una matriz

Un uso: directamente mediante la unión de una clase {}
 <h2: class = "[ '
 activo']"> Hello World </ h2>
El uso de dos: También puede pasar múltiples valores
<h2: class = "[ 'activo', 'línea']" > Hello World </ h2>

Utilizar tres: existen las clases ordinarias, no en conflicto
Nota: Habrá título / activo / línea de tres clases
<h2 class = "title": class = "[ 'activo', 'línea']"> Hello World </ h2>

Uso de cuatro: si es demasiado complejo, puede ser colocado en un métodos o calculado
Nota: las clases es un atributo calculado
<H2 class = "title": class = "clases"> Hello World </ h2>

manifestación

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "UTF-8">
  <Title> Título </ title>
　<Style>
    .active {
      color rojo;
    }
　　.line {
　　　　frontera -fondo: 1px solid # 000 ;
　　}
  </ Style>
</ Head>
<Body>

<Div id = "aplicación">
  <H2 class = "title": class = "[activo, línea]"> {{mensaje}} </ h2>
  <H2 class = "title": class = "changeClass ()"> {{mensaje}} </ h2>
</ Div>

<Script src = "../ js / vue.js"> </ script>
<script> 
  aplicación const = nueva Vue ({
    el: '#app' ,
    Datos: {
      Mensaje: 'V vinculante la clase bind' ,
    },
    métodos: {
      changeClass: función () {
         retorno [ este .active, este .line]
      }
    }
  })
</ Script>
</ Body>
</ Html>

v-bind estilo de encuadernación

Una manera: sintaxis de objetos

Significado de la sintaxis de objetos es: con estilo detrás de un objeto

<H2: style = "{clave (nombre del atributo): valor (valor de atributo)}"> {{mensaje}} </ h2>

El estilo está de vuelta con un tipo de objeto
　　objeto clave es el nombre de la propiedad CSS
　　valor específico es el valor asignado al objeto, el valor de los datos de atributos se puede derivar de

: Style = "{color: 'rojo', fontSize: '50px'}"

manifestación

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "UTF-8">
  <Title> Título </ title>
</ Head>
<Body>

<Div id = "aplicación">
  <H2 class = "title": style = "{color: 'rojo', fontSize: '50px'"> {{mensaje}} </ h2>
</ Div>

<Script src = "../ js / vue.js"> </ script>
<script> 
  aplicación const = nueva Vue ({
    el: '#app' ,
    Datos: {
      Mensaje: 'de unión a la de estilo bind V' ,
    }
  })
</ Script>
</ Body>
</ Html>

Segunda manera: la sintaxis de matrices

Significado sintaxis matriz es: con el dorso de clase es una matriz

Con este último estilo es un tipo de matriz
　　Una pluralidad de valores, se puede dividir

<Div v-bind: style = "[bgc, TamañoDeFuente]"> </ div>

manifestación

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "UTF-8">
  <Title> Título </ title>
</ Head>
<Body>

<Div id = "aplicación">
  <H2: style = "[bgc, TamañoDeFuente]"> {{mensaje}} </ h2>
</ Div>

<Script src = "../ js / vue.js"> </ script>
<script> 
  aplicación const = nueva Vue ({
    el: '#app' ,
    Datos: {
      el mensaje: 'Hola' ,
      BGC: {backgroundColor: 'rojo' },
      Tamaño de fuente: {fontSize: '100px' },
    }
  })
</ Script>
</ Body>
</ Html>

clase se unen v-bind o el estilo de la gramática básica

Supongo que te gusta