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

「p59 クラス(class)属性にバインドする。| Bind to a class attribute. 」

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

あなたもバインドさせてみよう！（文字の色を変えてみよう、赤色に変わるよ）| Let's bind you too! (Let's change the color of the letters, it will turn red)

　 「F12」→「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;
}

「p60　リストデーターをバインドする | Bind list data 」

書式：<要素名　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: '山田'}
]
}
});

「P63 条件付きで描画する | Conditionally draw」

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

あなたもバインドさせてみよう！（もし500円以下なら「セール実施中と表示される設定になってます）
　 「F12」→「console」→「app6.price =　'ここに値段' 」を入力　→ENTER

HTML

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

JavaScript

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

40代のサラリーマンです。独学でプログラミングを学び、このサイトをネットに掲載するまで出来ました。
現在はプログラミングとは全く関係のない仕事をしています。育児と家事をしながら、毎日コツコツと勉強してきました。
学び始めて意外にはまっています。学んだことはアウトプットしていくことが大事だと教わり、これからも学び、ブログを更新していきたいと思います。| I am doing work that has nothing to do with programming. I have been studying little by little every day while raising children and doing household chores. I'm surprised when I start learning. I learned that it is important to output what I have learned, and I would like to continue learning and updating.