0%

Programmingプログラミングナレッジ

Posted:2019.05.06

Vue.jsで動的にクリックで切り変わるトグル機能をv-ifを使って実装する

今回はVue.jsのコンポーネント内でトグル機能を実装する方法をまとめていきたいと思います。一般的なウェブサイトやアプリケーションでもよく見かける機能で、jQueryを使う場合やDOMの操作でclassを切り替えるなどでも実装してきた例もあるかと思いますが、Vue.jsの場合にはこれまでと少し異なるので、ぜひ覚えておきましょう。では早速コードを見ていきます。

【Vue】

<template>
 <div id="app">
  <button v-on:click="toggle_switch()">Toggle Button</button>
  <p v-if="isActive === false">初期表示の内容
  </p>
  <p v-else>クリックで切り替わった内容
  </p>
 </div>
</template>

<script>
 export default {
  data: function() {
   return {
    isActive: false
   }
  },
  methods: {
   toggle_switch: function() {
    this.isActive = !this.isActive
   }
  }
 }
</script>

 

HTMLのテンプレート側では、クリックする要素(上記ではbutton要素)と、切り替わる内容をそれぞれ用意します。そしてスクリプトでは、「data」オプションで切り替わる時の状態を表す値を入れておきます。続いて「methods」オプションで、dataオプションの値が切り替わる関数を設定しています。上記のように設定することで値が交互に切り替えることができます。

 

テンプレートのHTMLに戻り、クリックする要素には「v-on」ディレクティブにclickを指定します。このv-onディレクティブでイベントを設定することができます。今回はそのイベントにclickを設定しています。そして値には先ほどmethodsオプションで設定した関数を入れます。

 

最後に切り替わる内容に「v-if」ディレクティブを設定することで条件分岐ができるようにします。v-ifの値には当てはまる条件式を入れます。後に続く要素には「v-else」を指定することを忘れずに。

 

これでクリックで動的に内容が切り替わるトグル機能が実装できました。consoleなどのデバックツールで確認すると、dataオプションで設定した値が切り替わっているのがわかりますね。

Vue.jsで動的にクリックで切り変わるトグル機能をv-ifを使って実装する

Vue.jsで動的にクリックで切り変わるトグル機能をv-ifを使って実装する

 

ちなみにですが、「v-on」ディレクティブでイベントを設定する際には下記のように@を用いた省略記法も用意されています。慣れてくるとこちらの記法で記述すると楽ですね。

<button @click="toggle_switch()">Toggle Button</button>

 


 

いかがでしょうか、jQueryなどでもよく使われていたトグル機能ですが、このようにVue.jsでも簡単に実装することができます。使いどころは多く、応用もたくさんあるのでぜひ覚えておきたいですね。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】