當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue v-if指令

發布時間：2025/1/21 vue 51 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue v-if指令小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

指令

指令的英文：directive，vue指令的作用是通過帶有v-的特殊屬性，實現對dom的響應式加載

v-if

v-if的作用是通過一個布爾表達式進行對dom的上樹和下樹的渲染
基本使用：

<p v-if="false">我是第一行dom元素</p> <p v-if="true">我是第二行dom元素</p>

我們工作中不是使用布爾值直接進行渲染，而是通過data帶有布爾值的進行渲染

<body><div id="app"><p v-if="boo">我是第一行dom元素</p><p v-if="!boo">我是第二行dom元素</p></div><script src="js/vue.js"></script><script>var vue = new Vue({el: '#app',data:{boo: false}})</script> </body>

第二種情況是通過使用表達式進行邏輯判斷

<body> <div id="app">//當boo的值等于100的時候再顯示<p v-if="boo == 100">我是第一行dom元素</p><button @click="add">按我加1</button></div><script src="js/vue.js"></script><script>var vue = new Vue({el: '#app',data:{boo: 95},methods:{add(){this.boo++}}})</script> </body>

v-if的顯示根本原理一個是通過對值的隱式轉換，一個就是通過對表達式的判斷得出的布爾值得來的
我們將案例進行深入演變

<body><div id="app"><h2>{{boo}}</h2><p v-if='boo >= 0 && boo <= 5'>我是5</p><p v-if='boo >= 6 && boo <= 10'>我是10</p><p v-if='boo >= 11 && boo <= 15'>我是15</p><p v-if='boo >= 16 && boo <= 20'>我是20</p><p v-if="boo > 20">我是大于20</p><button @click="add">按我加1</button></div><script src="js/vue.js"></script><script>var vue = new Vue({el: '#app',data:{boo: 0},methods:{add(){this.boo++}}})</script> </body>

上面的代碼是通過v-if一層一層進行判斷的，實際上是可以通過v-else-if和v-else進行分支判斷

需要注意的是v-else的使用前提是必須先有v-if并且中間不允許有任何的元素間隔

上面的代碼寫法是錯誤的，因為div不能在v-if和v-else之間進行拆分
正確的寫法：

<p v-if='boo >= 0 && boo <= 5'>我是5</p> <p v-else="boo > 20">我是大于20</p> 與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

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

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

Vue
指令

上一篇： vue的插值语法及el和data、met
下一篇： html5倒计时秒杀怎么做,vue 设