1. 程式人生 > >Vue.js教程(三):v-if條件判斷

Vue.js教程(三):v-if條件判斷

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)。

學習前端最好的方式就是動手用一用,效果出來了就明白了。