Vue.jsスタイルのバインディング

1.オブジェクト構文

（1）、結合した標的クラスにスタイルキーオブジェクト、キーブール値の名前をV-バインドを使用しました。これがtrueの場合、クラス名を削除するには、偽のクラス名を追加します。
このメソッドは、クラスのクラス名を決定するのに適しているが、添加してもよい、状況が追加することはできません

.active{
    color:red;
}

<div id="app">
    <p :class="{active:isActive}">今天礼拜四</p>
</div>

var vm = new Vue({
    el:'#app',
    data:{
        isActive:true
    }
})

（2）複数のクラス名を追加します。あなたはより多くのキーと値のペアを追加することができます
注：複数のクラス名、キー最高の引用符を追加したり、エラーになりますとき

<p :class="{active:isActive,'text-center':isCenter}">今天礼拜四</p>

（3）V-バインド：オブジェクトを受信するクラスは、目標値が彼に渡すことができ、またはプロパティリターンに彼ができるオブジェクトを計算する方法であってもよいです

computed:{
  classObject:function(){
       return {active:this.isActive,'text-center':this.isCenter}
  }
}

<p :class="classObject">今天礼拜四</p>

2.配列構文

アレイは、V-バインドに渡すことができる：クラス、適用するクラスリスト
構文：V-バインド：クラス=「 []」
配列要素は、クラスのクラス名とすることができる、可変VUEを定義することができます

//直接使用类名
<p :class="['active','text-center']">今天礼拜四</p>
//使用vue定义的变量
<p :class="[activeClass,centerClass]">今天礼拜四</p>

data:{
    activeClass:'active',
    centerClass:'text-center'
}

レンダリング結果：

<p class="active text-center">今天礼拜四</p>

3.バインドインラインスタイル

実際には、バインディングのスタイル属性値にV-バインドを使用する。
（1）オブジェクト構文：単一のCSSプロパティの割り当てに適しています。
構文：V-バインド：スタイル=「 {CSSの属性、属性値}」
、（2）配列構文：二つまたはCSSプロパティ割り当てつ以上のに適した
V-バインド：構文スタイル= " [{CSSの特性、特性値}、{CSS属性、属性値}] "
注：オブジェクトキーを持つことができない-このような文字は、textAlignを書き込むテキストALIGN

<!-- html语法 -->
<h1 style="color:red">html语法</h1>
<!-- 对象语法 css属性值为字符串-->
<h1 :style="{color:'green'}">对象语法</h1>
<!-- 对象语法 css属性值为vue定义的变量-->
<h1 :style="{color:myColor}">对象语法</h1>
<!-- 数组语法 -->
<h1 :style="[{color:'green'},{textAlign:'center'}]">数组语法</h1>

レンダリング結果：

<h1 style="color: red;">html语法</h1>
<h1 style="color: green;">对象语法</h1>
<h1 style="color: blue;">对象语法</h1>
<h1 style="color: green; text-align: center;">数组语法</h1>

クラスラベル4.サブアセンブリに基づいて

コンポーネント自体がクラスのカテゴリを持っている場合、彼は新しいクラスのカテゴリを与えたときバインディングコンポーネントの呼び出し中に、それらはカバーされませんが、積み重ねます

//父组件
<child :class="{box:flag}"></Child>

//子组件
<div :class="{child:flag}">
    <p>我是子组件</p>
</div>

結果をレンダリング：
???

私は、サブアセンブリ午前1

···