覚えておきたいVクラス!|Vue.js入門

VクラスはVue.jsの基本!

Vue.jsを操作するのに欠かせないのがVクラスです。
ですが、初めてVue.jsを勉強する人には「Vクラスはどんな時に使用するの?」と思われる方も少なくはないと思います!今回はそのような人の為にVクラスをまとめて見ました。

v-text 要素のtextContentを更新できる。マスタッシュ記法でも使用が可能。例 {{v-html}}
v-html 要素のinnerHTMLを更新できる。
v-show 式の値の真偽に応じて、要素のCSSプロパティdisplayをトグルできる。(CSSで表示・非表示)
v-if バインディングの値の真偽値に基いて要素の描画ができる。(要素自体を生成・破棄)
v-else
v-else-if
v-for

v-text

要素のtextContentを更新できます。{{v-html}}などの二重の中括弧で変数を囲むことでHTMLタグに v-text を記述しなくても描画できます。

See the Pen YEQJpo by Higemura (@Higemura) on CodePen.0

v-html

要素のinnerHTMLを更新できます。v-textとは違いtextContentではなくHTMLのタグを描画することができます。

See the Pen YExKxm by Higemura (@Higemura) on CodePen.0

v-show

式の値の真偽に応じて、要素のCSSプロパティdisplayをトグルで操作できます。
HTML要素を追加・削除するわけではなく、CSSの「display:block;」「display:none;」で表示切り替えをします。

See the Pen v-show by Higemura (@Higemura) on CodePen.0

v-if

バインディングの値の真偽値に基いて要素の描画を行います。v-showはCSSで表示・非表示を切り替えていましたが、v-ifは要素自体を生成・破棄できます。

See the Pen v-if by Higemura (@Higemura) on CodePen.0

v-for

要素またはテンプレートブロックを複数回描画します。Class名は特別な文法 (in|of) 式を使う必要があります。
例:v-for=”item in items”、v-for=”item of items” など

See the Pen v-for by Higemura (@Higemura) on CodePen.0

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です