v-if で要素の出力制御を行う
v-ifの値がtrueの時に、要素の表示を行う。
<div id="app1" class="frame"> <h2 v-if="show">v-ifのサンプル</h2> <button v-on:click="show = !show">タイトルを{{buttonLabel}}</button> </div
var app1 = new Vue({ el: '#app1', data: { show: true }, computed: { buttonLabel: function(){ if(!this.show){ return "表示"; } return "非表示"; } } });
v-ifの中には式も記述できる
<h2 v-if="show == true">v-ifのサンプル</h2>
v-show で要素の出力制御を行う
<div id="app1" class="frame"> <h2 v-if="show">v-showのサンプル</h2> <button v-on:click="show = !show">タイトルを{{buttonLabel}}</button> </div
v-ifとv-showの違い
v-ifはfalseの時、指定したタグのDOMオブジェクトを削除するが、v-showは指定したタグにstyle="display: none;"
の属性を追加する。
true
false v-ifのタグが消えて、v-showはdisplay: none;が付いたのがわかる。
v-else-ifとv-else
v-ifの条件に合致しない場合、v-else-ifとv-elseを続けて記述することができる。
<h2 v-show="arg == 'default'">変更なし</h2> <h2 v-else-if="arg == 'fix'">fixと入力</h2> <h2 v-else="arg">fix以外に変更</h2> <input type="text" name="arg" v-model="arg">
var app1 = new Vue({ el: '#app1', data: { arg:"default" } });
v-ifで複数のタグを制御する
<template>
タグで括ればよい。
<template v-if="show"> <h2>v-ifテスト</h2> <p>templateタグで纏める</p> </template>
サンプルコード
Vue-Samples/if.html at master · letitride/Vue-Samples · GitHub
リンク