はじめに
Vue.jsは、シンプルで使いやすいフロントエンドフレームワークです。Vue.jsを使うと、動的なWebアプリケーションを簡単に構築できます。この記事では、Vue.jsでの条件付きレンダリングについて、サンプルコードを使いながら初心者にも分かりやすく解説します。
条件付きレンダリングとは？
条件付きレンダリングとは、特定の条件に基づいてDOM要素を表示したり非表示にしたりすることです。Vue.jsでは、v-if、v-else-if、v-else、およびv-showディレクティブを使用して、条件付きレンダリングを簡単に実現できます。
Vue.js の条件付きレンダリング
まずは、Vue.jsでの条件付きレンダリングの基本的な例を見てみましょう。
サンプルコード
以下のコードは、ユーザーがログインしているかどうかを示すメッセージを条件付きで表示する例です
sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue.js 条件付きレンダリング</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<p v-if="isLoggedIn">Welcome, User!</p>
<p v-else>Please log in.</p>
<button @click="toggleLogin">Toggle Login State</button>
</div>
<script>
new Vue({
el: '#app',
data: {
isLoggedIn: false
},
methods: {
toggleLogin() {
this.isLoggedIn = !this.isLoggedIn;
}
}
});
</script>
</body>
</html>
解説
- v-ifディレクティブは、isLoggedInがtrueの場合にメッセージを表示します。
- v-elseディレクティブは、isLoggedInがfalseの場合にメッセージを表示します。
- ボタンをクリックすると、toggleLoginメソッドが呼び出され、isLoggedInの値が切り替わります。
まとめ
Vue.jsでの条件付きレンダリングは、v-if、v-else-if、v-else、およびv-showディレクティブを使うことで簡単に実装できます。これらのディレクティブを使用することで、ユーザーの状態やアプリケーションの状態に応じて動的にコンテンツを表示することが可能です。ぜひ、これらの方法を試して、動的なWebアプリケーションを構築してみてください。