Vue.js教程(三):v-if條件判斷
阿新 • • 發佈:2018-12-21
v-if是繼v-bind之後的又一個v-xxx系列
前言
v-if這是我們學習Vue中的的第二個v-xxx系列。學到這裡,不得不提一下的是,所有v-bind或者v-if所關聯的都是Vue的動態變數,是變數!是變數!是變數!
v-if基本使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>條件迴圈</title> <!--第一步:匯入vue.js的引用--> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <!--第二步:使用v-if進行條件判斷,條件為true則顯示此標籤,false則不現實--> <div id="app-3"> <p v-if="seen">現在你看到我了</p> </div> <!--第三步:啟用vue,給動態屬性複製--> <script type="text/javascript"> var app3 = new Vue({ el: '#app-3', data: { seen: true } }) </script> </body> </html>
如上程式碼所示,即為v-if的使用,seen是vue定義的一個變數。注意:v-if的變數值一般都是true或者false。效果有點像是顯示(true)/隱藏(false)。
學習前端最好的方式就是動手用一用,效果出來了就明白了。