Vue.jsの基本(8)v-ifのポイント

JavaScript

Vue.js では、HTMLのブロックを条件付きレンダリングすることができます。その場合、v-if ディレクティブを使用します。また、v-elseで “else ブロック” を追加することも可能です。

これの何が良いかというと例えばレスポンシブなページを作成するときに、モバイル用に表示しておきたい内容とPC用に表示したい内容が違う時などGoogleのペナルティを気にせずに実現できてしまいます。

スポンサーリンク

v-showとの使い分け

v-ifと同じような使い方ができるものにv-showがあります。こちらも要素の表示と非表示を切り替えることができますが、たとえ要素を非表示にしてもその要素のDOM構築は行われます。つまり、display:noneで隠しただけでHTMLタグは存在します。一方のv-ifの方は要素そのものを無きものにしてくれるものです。

v-ifの簡単な例

次の例はAブロックとBブロックをボタンのクリックで切り替えるものです。

初期状態の表示
Switchボタンをクリックした後の状態

HTMLコード

<p v-if="show">Aが好きな人の内容</p>
<p v-else>Bが好きな人の内容</p>
<p v-show="show">Cが好きな人の内容</p>
<button @click="show=!show">Switch</button>

jsコード

var app = new Vue({
  el:'#app',
  data:{
      show:true
  },
})

v-ifの仕組みを使うとモバイル用とPC用のレスポンシブページでメディアクエリを使ったCSSデザインの変更だけではなく、HTMLのDOM構造を変更することも可能となり柔軟性が格段に上がり、またカスタマイズも効率的になると考えられます。

PC用のナビゲーションが横並びのものからモバイル用のハンバーガーメニューに切り替わるサンプルを作成したので参考にしてください。

GitHubのサンプル

タイトルとURLをコピーしました