Vue.js　クラス(class)属性、リストデータ、v-ifを使った条件付き

バインド（バインディング）とはデータバインディングの略でデーターとテンプレート（HTML）の要素を紐づけることによって、データーの変更をテンプレート側に自動で反映する仕組みのこと。

クラス(class)属性にバインドする

書式：<要素名　v-bind:class=”{class名: class名を出力する条件式}”>

コンソールからの変更・確認の方法

バインドさせて文字の色を変えてみよう、赤色に変わるよ　

「console」→「app4.color = true」を入力　→ENTER

HTML

<div id=”app4″>
<p v-bind:class=”{color: color}”>hello Vue!</p>
</div>

　　

JavaScript

var app4 = new Vue({
el:’#app4′,
data: {
color:false
}
});

CSS

.color {
color: red;
}

リストデーターをバインドする

書式：<要素名　v-for=”配列要素を代入する変数名　in 配列の変数名”>・・・＜/要素名＞

HTML

<div id=”app5″>
<table border=”1″>
<tr><th>商品コード</th><th>商品名</th></tr>
<tr v-for=”item in products”>
<td>{{item.code}}</td><td>{{item.name}}</td>
</tr>
</table>
</div>

JavaScript

var app5 = new Vue({
el: ‘#app5’,
data: {
products: [
{code: ’01’, name: ‘田中’},
{code: ’02’, name: ‘鈴木’},
{code: ’03’, name: ‘山田’}
]
}
});

条件付きで描画する

書式：＜要素名　v-if=”条件式＞条件式が成立する場合の出力内容＜/要素名＞

さあ、バインドさせてみよう！（もし500円以下なら「セール実施中」と表示される設定になってます）
　

コンソールからの変更・確認の方法

「console」→「app6.price =　’ここに値段’ 」を入力　→ENTER
　　　

または、Javascript側のprice : 980となっているところを500円以下に変更してみましょう

HTML

<div id=”app6″>
{{price}}円　<span v-if=”price < 500″>セール実施中！</span>
</div>

JavaScript

var app6 = new Vue({
el: ‘#app6’,
data: {
price : 980
}
});

わからないことはプロフェッショナルから学ぶのが一番