たにーの楽しい闘争

日々の気になる事を書いていきます

【Vue.js】基礎知識メモ

v-html

scriptタグ内で生成したhtmlタグを組み込みたい場合等

v-bind

タグの属性の値に変数等を設定したい場合等
書き方:<v-bind:属性名="設定する値">

v-if・v-else

条件によって表示を変えたい場合等

v-for

配列の値を順番に取り出し変数に入れてタグを出力したい場合等
書き方:<タグ v-for ="変数 in 配列">

v-model

inputタグで入力された値をVueのdataプロパティの値にバインドしたい場合等
書き方:<input v-model="変数名">

v-on

イベント関係の属性に値をバインドしたい場合
書き方:v-on:イベント名="処理"
例:<p v-on:click="insert"></p>(onclickをバインドしたい場合)
省略記法:<p @click="insert"></p>

参考

テンプレート構文 — Vue.js

templateタグ

複数のタグをひとまとめにするのに用いる
例えば複数行を条件によって、表示非表示にさせたい場合等
このタグ自体は表示されない。