[Vue.js] 条件付きレンダリング （if・for文）
Vue.jsのテンプレートではvue.js独自のif・forなどの書き方があります。これらはディレクティブの中でも条件付きレンダリングと呼ばれます。
Contents
if文
v-ifの基本的な使い方
条件に合ったときに文字を表示するというプログラムを作成してみます。
[HTML]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <div v-if="isActive"> Active </div> </div> </body> </html> |
[JavaScript]
|
1 2 3 4 5 6 |
new Vue({ el: '#app', data:{ isActive:true } }) |
これで画面にはActiveという文字が表示されます。
isActive:falseに変更すると画面に何も表示されなくなります。
v-elseの基本的な使い方
if else文のelse部分の書き方です。
v-ifとv-elseは続けた要素で書かなければならないという制約があります。
[HTML]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <div v-if="isActive"> Active </div> <div v-else="isActive"> No Active </div> </div> </body> </html> |
[JavaScript]
|
1 2 3 4 5 6 |
new Vue({ el: '#app', data:{ isActive:false } }) |
こちらはisActiveがfalseなのでNo Activeが表示されます。
v-else-if文
[HTML]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <div v-if="sampleA"> v-if </div> <div v-else-if="sampleB"> v-else-if </div> <div v-else> v-else </div> </div> </body> </html> |
[JavaScript]
|
1 2 3 4 5 6 7 |
new Vue({ el: '#app', data:{ sampleA:false, sampleB:false } }) |
こちらはv-if,v-else-ifがともにfalseなので、v-elseだけが実行されて、画面に「v-else」の文字が表示されます。
v-show
v-ifは該当しないと要素を表示しません。v-showは要素にdisplay:noneを付けて見えないようにするという違いがあります。
templateタグは表示されないので、ここにv-showは設定できません。
v-showは最初に描画して、必要ないものを消すという動作になります。
v-for
vueでのfor文の使い方です。配列に入っている教科名をリスト形式で表示させてみます。
インデックス無し
[HTML]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <ul> <li v-for="subject in subjects">{{subject}}</li> </ul> </div> </body> </html> |
vueディレクティブのsubject in subjects”>{{subject}}がポイントになります。
subjectsの中にある複数の配列をsubjectという変数に1つずつ入れていきます。
[JavaScript]
|
1 2 3 4 5 6 |
new Vue({ el: '#app', data:{ subjects:['国語','英語','数学'] } }) |
インデックス有り
第二引数にindexを指定するとインデックスを表示することができます。
[HTML]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <ul> <li v-for="(subject , index) in subjects">[{{index}}]:{{subject}}</li> </ul> </div> </body> </html> |
[JavaScript]
|
1 2 3 4 5 6 |
new Vue({ el: '#app', data:{ subjects:['国語','英語','数学'] } }) |
[出力]
インデックスとキー有り
インデックスだけでなく、オブジェクトの場合はキーも表示することができます
[HTML]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <ul> <li v-for="(value, key , index) in sampleObject">[{{index}}]:（{{key}}）{{value}}</li> </ul> </div> </body> </html> |
[JavaScript]
|
1 2 3 4 5 6 7 8 9 10 11 |
new Vue({ el: '#app', data:{ subjects:['国語','英語','数学'], sampleObject:{ color:'red', width:'200px', height:'300px' } } }) |
[表示]
for文での繰り返し指定
forで10回繰り返しを行うプログラムです。
[HTML]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <ul> <li v-for="n in 10">{{n}}</li> </ul> </div> </body> </html> |
v-for=”n in 10″で10回繰り返すと言う意味です。
[JavaScript]
|
1 2 3 4 5 6 |
new Vue({ el: '#app', data:{ } }) |
関連記事
- [Vue.js] v-on:clickでclassを設定し要素の色を変化させる
- [Vue.js] ディレクティブの種類と使い方
- [Vue.js] StyleをVueインスタンスで指定
- [Vue.js] HelloWorldを表示してみる
- [Vue.js] render関数について（描画を理解）
