Vue 条件付きレンダリング実践ガイド: v-if、v-show、v-else、v-else-if
Vue の使用スキルの詳細な説明。 js は、さまざまな条件に基づいて特定の要素を表示または非表示にする柔軟な条件付きレンダリング命令を提供する、インタラクティブなフロントエンド インターフェイスを構築するためのオープン ソース JavaScript フレームワークです。 Vue では、v-if、v-show、v-else、v-else-if は、一般的に使用される条件付きレンダリング命令の 1 つです。この記事では、これらのディレクティブの使用法について詳しく説明し、対応するコード例を示します。
v-if ディレクティブは、条件に基づいて特定の要素をレンダリングするために使用されます。条件が true の場合、要素はレンダリングされます。条件が false の場合、要素はレンダリングされません。
例 1:
<h1 v-if="show">Hello, World!</h1>
<p v-else>Sorry, the element is hidden.</p>
<script><br>export default {<br> data() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>return { show: true }</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><p>}<br>}<br></script>
上記の例では、 show 変数の値に応じて、show が true の場合は「h1」要素のテキストが表示され、show が false の場合は「p」要素のテキストが表示されます。
v-else ディレクティブは v-if の後に使用され、同じラベル内ですぐに使用して v-if とは逆の条件を表現できます。
例 2:
<h1 v-if="show">Hello, World!</h1>
<h3 v-else>Title</h3>
<script><br>export default {<br> data() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>return { show: true }</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><p>}<br>}<br></script>
上記の例では、 show の値が true の場合、「h1」要素のテキストが表示され、show の値が false の場合、「h3」要素のテキストが表示されます。
v-show コマンドは v-if に似ており、特定の条件下で要素の表示と非表示を制御するためにも使用されます。違いは、v-show では要素を直接削除したり追加したりするのではなく、CSS の display 属性を利用して要素の表示・非表示を切り替えている点です。
例 3:
<h1 v-show="show">Hello, World!</h1>
<p v-show="!show">Sorry, the element is hidden.</p>
<script><br>export default {<br> data() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>return { show: true }</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><p>}<br>}<br></script>
上記の例では、 show の値が true の場合、「h1」要素のテキストが表示され、show の値が false の場合、「p」要素のテキストが表示されます。
v-else-if ディレクティブは v-else ディレクティブに似ていますが、複数の連続した条件を設定できます。 v-if ディレクティブや v-else ディレクティブを使用する場合に非常に便利です。
例 4:
<h1 v-if="score >= 90">A+</h1>
<h2 v-else-if="score >= 80">A</h2>
<h3 v-else-if="score >= 70">B</h3>
<h4 v-else-if="score >= 60">C</h4>
<h5 v-else>F</h5>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
