バインドする

vue.jsフレームワーク

  1. HOME
  2. バインド

テキストにバインド

HTMLのテキスト部分にマスタッシュで{{プロパティ名}}を記述すると、アプリケーションのdataオプションに定義したプロパテイの値が、その場所に置き換わって出力される
三項演算子
条件式 ? 条件式が成立した場合に実行する式 : 条件式が不成立の場合に実行する式
三項演算子はif~else文と等価の条件分岐です。

属性にバインド

バインドしたいデータのプロパティ名を属性の値に記述し、属性名の前に「v-bind:」を付ける
<要素名 v-bind:属性名="プロパティ名">
※{{...}}マスタッシュ構文は要素内容にバインドする場合にだけ使用できます。その為、属性にバインドしたいときは{{...}}で囲まないこと!

style属性にバインド

要素に直接スタイルシートを指定する場合、style="CSSプロパティ名:値:"と記述しますが、Vue.jsのデータをバインドするときは、 CSSプロパティ名をキャメルケースに置き換え、値にはバインドしたいアプリケーションのプロパティ名を記述する。
<要素名 v-bind:style="{cssのプロパティ名: アプリケーションのプロパティ名}">
CSSのプロパティ名はキャメルケースで記述
ハイフンを使わずに2つ目以降の単語だけ先頭大文字にして連結する方法をキャメルケースと呼ぶ。CSSのプロパティ名はこの記述にしなければならない!
またスタイルをまとめて指定する際はカンマ区切りです。この構文はJavaScriptのオブジェクト表記です。

class属性にバインド

style属性にバインドする場合との違いは、オブジェクトの値が「そのclass名を出力するための条件を表す」という点です。
<要素名 v-bind:class="{class名: class名を出力する条件式}">

リストデータをバインド

リストとは複数のデータを1つにまとめて扱いやすくしたもので、 JavaScriptでは配列を使って表します。v-forを使うと、要素に配列データをバインドできます。
c要素名 v-for="配列要素を代入する変数名 in 配列の変数名">...</要素名>
v-forの一つ目の変数は何でもいいが、一般的には、 itemやelement、 eleのように、それが配列要素であることがわかる抽象的な変数名が使われることが多いようです。

条件付きで描画

〇条件式が成立するときだけ要素を出力
v-ifを記述した要素は、指定した条件式が成立する場合だけDOMに出力され、条件式が成立しない場合はDOMに出力されない。
<要素名 v-if="条件式">条件式が成立する場合の出力内容</要素名>
〇複数の条件式を指定
2つ以上の条件式に応じて出力内容を分岐させたい場合は v-else-if および v-else を使う
<要素名 v-if="条件式">条件式が成立する出力内容</要素名>
<要素名 v-else>条件式が不成立の出力内容</要素名>
<要素名 v-if="条件式1">条件式1が成立する出力内容</要素名>
<要素名 v-else-if="条件式2">条件式2が成立する出力内容</要素名>
<要素名 v-else>条件式1も条件式2も不成立の出力内容</要素名>
〇条件式が成立する場合だけ要素を表示
v-showを記述した要素は、折定した条件式が成立する場合だけ表示され、不成立の場合は表示されません。
<要素名 v-show="条件式">条件式が成立する出力内容</要素名>
・要素はDOMに出力される (CSSのdisplay:none;で非表示になるだけ)
・v-else-ifやv-elseと組み合わせることはできない
・<template v-show="..."></template>と記述することはできない
v-ifとv-show
DOMの更新はブラウザにとって負担が大きい為、タブで表示内容を切り替えるような場面で v-if を使うと、タブを切り替えるたびにノードの追加と削除が発生してしまうので、 v-show を使ったほうが商速な描画が期待できます。