Vue條件渲染的實戰指南：v-if、v-show、v-else、v-else-if的使用技巧詳解
Vue.js 是用於建立互動式前端介面的開源JavaScript框架，它提供了靈活的條件渲染指令來根據不同的條件來顯示或隱藏特定的元素。在Vue中，v-if、v-show、v-else、v-else-if是我們常用的條件渲染指令之一。本文將詳細介紹這些指令的用法，並提供相應的程式碼範例。
- v-if和v-else
v-if 指令用於根據條件來渲染特定的元素。如果條件為真，則元素會被渲染出來，如果條件為假，則元素將不會被渲染。
範例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-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-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>
登入後複製
#
