<!--條件渲染：1. v-if寫法：(1). v-if="表達式"(2). v-else-if="表達式"(3). v-else="表達式"適用于：切換評率較低的場景特點：不展示的DOM元素直接被移除注意：v-if 可以和 v-else-if、v-else 一起使用，但要求結構不能被 "打斷"2. v-show寫法：v-show="表達式"適用于：切換頻率較高的場景特點：不展示的DOM元素未被移除，僅僅是使用樣式隱藏掉3. 備注：使用 v-if 時，元素可能無法獲取到，而使用 v-show 一定可以獲取到 --><div id="root"><h2>當前的值是：{{num}}</h2><button @click="num++">按鈕</button><p v-show="num === 1">Angular</p><p v-show="num === 2">React</p><p v-show="num === 3">Vue</p><p v-if="num === 1">Angular</p><p v-if="num === 2">React</p><p v-if="num === 3">Vue</p><p v-if="num === 1">Angular</p><p v-else-if="num === 2">React</p><p v-else>Vue</p>--> </div> <script src="../js/vue.js"></script> <script>Vue.config.productionTip = false;const vm = new Vue({el: '#root',data: {num: 0},methods: {}}) </script>

總結

以上是生活随笔為你收集整理的vue 条件渲染 v-if | v-show的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。