Vue條件渲染的實戰指南：v-if、v-show、v-else、v-else-if的使用技巧詳解-Vue.js-PHP中文網

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:

#<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:

#在上述範例中，當show的值為true時，顯示"h1"元素中的文字；當show的值為false時，顯示"h3"元素中的文字。