v-if, v-showによる表示/非表示の切り替え
Vue3ではv-showを使うことで要素を表示したり非表示にすることができます。以下のコードはボタンをクリックするとその下にある要素を表示したり非表示にすることができます。
ボタンをクリックするとOnClick関数が呼び出されてshowがtrueになったりfalseになります。これによって文字列の表示と非表示を切り替えることができるのです。
|
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 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>はじめてのVue 3</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue@3.2/dist/vue.global.js"></script> </head> <body> <div id ="ex1"> <input type="button" v-on:click="OnClick" value="表示/非表示"> <p v-show="show">文字列</p> </div> <script> let app = { data: () => { return { show: true, }; }, methods:{ OnClick(){ this.show = this.show ? false:true; }, } }; Vue.createApp(app).mount('#ex1'); </script> </body> </html> |
v-showではなくv-ifを使う方法もあります。showがtrueであればその要素が表示され、そうでない場合はv-elseの要素が表示されます。
|
1 2 3 4 5 |
<div id ="ex1"> <input type="button" v-on:click="OnClick" value="表示/非表示"> <p v-if="show">文字列</p> <p v-else>非表示</p> </div> |
v-showとv-ifはどのような違いがあるのでしょうか？違いは要素がDOMに残るかどうかです。v-ifで非表示になる場合は、DOMから完全に削除されます。それに対してv-showはdisplay: none;というスタイル属性がつくだけでDOMから削除されてしまうわけではありません。
そのためv-ifのほうが計算コストが大きくなります。表示の切り替えが頻繁に行なわれる場合はv-ifではなくv-showを使ったほうがよさそうです。表示の切り替えが頻繁に行われない場合は、v-ifを使用するほうがv-showと比べてリソースを節約することができます。
配列の表示 v-for
配列の中身を表示させたい場合はv-forが便利です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div id ="ex2"> <ul> <li v-for="data in arr" :key="data">{{data}}</li> </ul> </div> <script> let app = { data: () => { return { arr: ['犬', '猫', '鳩', ], text:'', }; }, }; Vue.createApp(app).mount('#ex2'); </script> |
以下はテキストボックスに文字列を入力してボタンをクリックすると新しい要素が追加されるコードです。
|
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 26 27 28 29 30 31 32 |
<div id ="ex3"> <input type="text" v-model="text"><br> <input type="button" v-on:click="Add" value="追加"><br> <input type="button" v-on:click="Remove" value="先頭を削除"><br> <ul> <li v-for="data in arr" :key="data">{{data}}</li> </ul> </div> <script> let app = { data: () => { return { arr: ['犬', '猫', '鳩', ], text:'', }; }, methods:{ Add(){ if(this.text != ''){ // 文字列が入力されていない場合はなにもしない this.arr.push(this.text); this.text = ''; } }, Remove(){ this.arr.shift(); }, } }; Vue.createApp(app).mount('#ex3'); </script> |
v-for ディレクティブを使う際の注意点として、key属性 を忘れずに付与すること。vueには要素の移動を最小限に抑えるアルゴリズムが採用されているため、可能な限りその場の近い同じ要素を再利用しようとする性質（状態の維持）があるため、予期せぬバグが発生する可能性があります。その対策として、key属性を付与することで要素とデータとを関連付けます。これによってバグを防ぐことができます。
配列だけでなくオブジェクトも表示させることができます。そのさい引数を3つ (value, key, index) まで取ることができます。
|
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 |
<div id ="ex4"> <div v-bind:style="bold">データを表示させるだけ</div> <div v-for="data in object" v-bind:key="data">{{data}}</div> <div v-bind:style="bold">キーと値をセットで表示</div> <div v-for="(data, key) in object" v-bind:key="key">{{key}}:{{data}}</div> <div v-bind:style="bold">番号、キーと値をセットで表示</div> <div v-for="(data, key, index) in object" v-bind:key="key">{{index}}:{{key}}:{{data}}</div> </div> <script> let app = { data: () => { return { bold:'font-weight:bold', object: { 'dog': '犬', 'cat': '猫', 'pigeon': '鳩', }, }; }, }; Vue.createApp(app).mount('#ex4'); </script> |
v-for=”数値 in カウント数”と書けばfor文のような指定回数の繰り返し処理もできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div id ="ex5"> <div v-bind:style="bold">1から3まで</div> <div v-for="i in 3">{{i}}</div> <div v-bind:style="bold">0から2まで</div> <div v-for="(i, index) in 3">{{index}}</div> <div v-bind:style="bold">配列の要素を表示</div> <div v-for="(n, i) in 3">{{arr[i]}}</div> </div> <script> let app = { data: () => { return { arr:['犬', '猫', '鳩'], bold:'font-weight:bold', }; }, }; Vue.createApp(app).mount('#ex5'); </script> |
