Into the Program

【Vue.js】クリックで要素を動的に切り替える

Image

Vue.jsで要素を切り替える方法の1つとして、v-if、v-elseがあります。v-if条件がtrueであればDOMを生成し、falseであれば生成されません。v-elseはv-ifがfalseの場合にDOMが生成される構文です。こちらを利用して、クリックで要素を動的に切り替える処理を実装してみようと思います!

v-if、v-elseで動的に要素を切り替える

HTML

HTMLではidのelemSwitchをラッパーとし、その中にv-ifとv-elseを指定しています。buttonについている「@click」は「v-on:click」の省略した記述になります。buttonがクリックされた場合にスクリプトに指定しているmethodsの「active」が実行します。

<article id="elemSwitch">
  <button @click="active">Click Me!</button>
  <div v-if="isActive">最初に表示される要素</div>
  <div v-else>切り替え後に表示される要素</div>
</article>

JS

スクリプトでは、上記で指定したラッパーのelemSwitchを指定し、ボタンのクリックによってisActiveをトグルしています。isActiveがtrueのときはfalseを、falseのときはtrueとすることで要素が切り替わります。

var elemSwitch = new Vue({
  el: '#elemSwitch',
  data: {
    isActive: true
  },
  methods: { 
    active: function () {
      this.isActive = !this.isActive
    }
  }
})

DEMO

上記でご紹介した内容のデモになります!Firefoxの開発ツールやChromeの検証で切り替わる部分を見ていただきたいのですが、v-if、v-elseに指定した要素のどちらかしかDOMは生成されていないかと思います。

See the Pen 【Vue.js】Element Switch by ryoy (@intotheprogram) on CodePen.

v-if、v-elseについて

v-if、v-elseの詳細については下記のページが最も参考になるかと思います。

https://jp.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show

Vue.jsは日本語ドキュメントが充実していて、学習するのにとても便利ですね。今後もお世話になり続けます!

以上、Vue.jsでクリックで要素を動的に切り替える方法のご紹介でした!

SHARE