基本的な文法のV-バインドバインドクラスやスタイル

V-バインド・バインディング・クラス

一つの方法：オブジェクト構文

オブジェクト構文の意味は次のとおりです。オブジェクトクラスを持つの後ろ

<H2：クラス= "{类名1：値1、类名1：値2}"> {{メッセージ}} </ H2>

使用法：直接{}クラスを結合することによって
 <H2：クラス=「{ 『
アクティブ』：のisActive}」>ハロー<H2 />その他の
使用法II：また、複数の値を渡すことによって決定することができる
 <H2：クラス= 「{：のisActive、 『アクティブ』
 『行』：isLine}」>こんにちはH2世界</> 
用法3：一般的なクラスが存在し、競合しません
注：もしのisActiveとisLineが真である、そこタイトル /アクティブ/ ライン3クラス
 <H2 CLASS = "タイトル"：
クラス= "{ 'アクティブ'：のisActive、 '行'：isLine}">こんにちは<H2 />世界の
用法4：複雑すぎる場合、それは方法で配置することができますまたはで計算
注：クラスが算出された属性
 </ H2>のHello World：<クラス=「クラス」H2クラス=「タイトル」>

デモ

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
  <メタ文字コード= "UTF-8"> 
  <タイトル>タイトル</ TITLE> 
  <スタイル> 
    .active { 
      色：赤; 
    } 
　　.LINE { 
　　　　ボーダー底：1ピクセル固体＃000。
　　}
   </スタイル> 
</ head> 
<body> 

<DIV ID = "アプリケーション"> 
  <V-バインドH2クラス= "タイトル"：クラス= "{活性：のisActive、ライン：isLine}"> {{メッセージ}} </ H2> 
  <H2 CLASS = "タイトル" V-バインド：クラス= "changeClass（）"> {{メッセージ}} </ H2> 
  <ボタンVオン：クリック= "btnClick">按钮</ボタン> 
< / DIV> 

<'#app' 、
    データ：{ 
      メッセージ： 'バインド绑定クラス' 、
      のisActive：真、
      isLine：真
    }、
    メソッド：{ 
      btnClick（）{
         この .isActive =！この.isActive 
      }、
      changeClass（）{
         リターン {活性：本 .isActive、行：この.isLine} 
      } 
    } 
  }）
 </ SCRIPT> 
</ body> 
</ HTML>

第二の方法：配列構文

配列構文を意味することは次のとおりです。クラスの背面に配列です

使用法：直接クラス{}結合によって
 <H2：クラス= "[ '
アクティブ']">のHello World </ H2> 
使用法II：また、複数の値を渡すことができ
 <H2：クラス=「[ 'アクティブ' 、「行」]「> Hello Worldの</ H2> 

用法3：一般的なクラスが存在し、競合しません
注：そこタイトル/アクティブ/ラインを三つのクラス
<H2クラス=」タイトル「：クラス=」[ 「アクティブ」、「行」]
 「>こんにちはH2世界</> 
用法4：あまりにも複雑な場合は、計算されたかの方法で配置することができます
注：クラスのプロパティが計算され
、<h2のクラス=」タイトル「：クラス=」クラス「> Hello Worldの</ H2>

デモ

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
  <メタ文字コード= "UTF-8"> 
  <タイトル>タイトル</ TITLE> 
　<スタイル> 
    .active { 
      色：赤; 
    } 
　　.LINE { 
　　　　ボーダー -bottom：1ピクセル固体＃000 。
　　}
   </スタイル> 
</ head> 
<body> 

<DIV ID = "アプリケーション"> 
  <H2 CLASS = "タイトル"：クラス= "[アクティブ、線]"> {{メッセージ}} </ H2> 
  <H2クラス= "タイトル"：クラス= "changeClass（）"> {{メッセージ}} </ H2> 
</ div> 

<SCRIPT SRC = "../ JS / vue.js"> </ SCRIPT> 
<SCRIPT>'V-バインド绑定クラス' 、
    }、
    メソッド：{ 
      changeClass：関数（）{
         リターン [ この .active、この.LINE] 
      } 
    } 
  }）
 </ SCRIPT> 
</ body> 
</ HTML>

V-バインド結合スタイル

一つの方法：オブジェクト構文

オブジェクト構文の意味は次のとおりです。オブジェクトの背後にあるスタイルで

<H2：スタイル= "{キー（属性名）：値（属性値）}"> {{メッセージ}} </ H2>

オブジェクト型スタイルで後ろに
　　キーは、CSSオブジェクト属性名である
　　特定のオブジェクトに割り当てられた値から導出することができる属性データ値の値がされます

：スタイル= "{ 'は50px' 色：、 '赤' のfontSize}"

デモ

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
  <メタ文字コード= "UTF-8"> 
  <タイトル>タイトル</ TITLE> 
</ HEAD> 
<BODY> 

の<divのid = "アプリ"> 
  < H2クラス= "タイトル"：スタイル= "{色：、 '赤'のfontSize 'は50px'"> {{メッセージ}} </ H2> 
</ div> 

<スクリプトSRC =」../ JS / vue.js 「> </ SCRIPT> 
<SCRIPT> 
  CONSTアプリ = 新しいヴュー（{ 
    EL： '#app' 、
    データ：{ 
      メッセージ： 'V-バインド绑定スタイル' 、
    } 
  }）
 </ SCRIPT> 
</ BODY> 
</ HTML>

第二の方法：配列構文

配列構文を意味することは次のとおりです。クラスの背面に配列です

後者でアレイ型スタイルで
　　、複数の値分割することができます

<divのV-バインド：スタイル= "[BGC、フォントサイズ]"> </ div>

デモ

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
  <メタ文字コード= "UTF-8"> 
  <タイトル>タイトル</ TITLE> 
</ HEAD> 
<BODY> 

の<divのid = "アプリ"> 
  < H2：スタイル= "[BGC、フォントサイズ]"> {{メッセージ}} </ H2> 
</ div> 

<スクリプトSRC = "../ JS / vue.js"> </ SCRIPT> 
<SCRIPT> 
  CONSTアプリ = 新しいヴュー（{ 
    EL： '#app' 、
    データ：{ 
      メッセージ： '你好啊' 、
      BGC：{backgroundColorの： '赤' }、
      フォントサイズ：{たfontSize： '100ピクセル'} 
    } 
  }）
 </ SCRIPT> 
</ body> 
</ HTML>

基本的な文法のV-バインドバインドクラスやスタイル

おすすめ