Vue.jsの基本（8）v-ifのポイント

• Vue.jsの基本（1）Vue.jsの基本的な使い方
• Vue.jsの基本（2）dataプロパティについて
• Vue.jsの基本（3）computedとmethodsの違い
• Vue.jsの基本（4）監視プロパティについて
• Vue.jsの基本（5）コンポーネント作成
• Vue.jsの基本（6）親コンポーネントから子コンポーネントへデータを渡す方法
• Vue.jsの基本（7）classとスタイルのバインディング
• Vue.jsの基本（8）v-ifのポイント
• Vue.jsの基本（9）v-forの使い方

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ブロックをボタンのクリックで切り替えるものです。

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のサンプル