Codeラーニング

Vue.js入門 - 条件付きレンダリング

条件付きレンダリング

Vue.jsの条件付きレンダリング機能を学びます。

タスク

v-ifによる条件付きレンダリング

v-ifディレクティブを使って要素の表示/非表示を切り替えます

v-else-ifによる条件分岐

複数の条件に基づいて異なる要素を表示します

v-showによる表示切り替え

v-showディレクティブを使って要素の表示/非表示を切り替えます

ヒント

v-if、v-else-if、v-showディレクティブを使って、条件に応じて要素を表示/非表示にしましょう。

参考コード

// アプリケーションの作成
const app = Vue.createApp({
  data() {
    return {
      // v-if用のデータ
      isVisible: true,
      
      // v-else-if用のデータ
      score: 0,
      
      // v-show用のデータ
      userRole: 'user'
    }
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible
    },
    incrementScore() {
      this.score += 10
    }
  }
})

// マウント
app.mount('#app')

プレビュー

見本