Vue.js v-ifとv-showで表示制御を行う


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

f:id:letitride:20190727132546p:plain

false v-ifのタグが消えて、v-showはdisplay: none;が付いたのがわかる。

f:id:letitride:20190727132554p:plain

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