(3). v-if和v-else指令
功能：兩個元素二選一顯示
語法：<元素1 v-if=“返回bool值的表達式”><元素2 v-else>
注意:
- v-if和v-else兩個元素必須緊挨着，中間不能插入其他元素
- v-else後不要加任何=，和程序中if else的else後不加表達式道理一樣。
v-show vs v-if 差別
a. v-show通過display:none方式控制顯示隱藏，因爲不修改DOM樹，所以效率略高
b. v-if通過刪除元素方式控制顯示隱藏，所以要修改DOM樹，效率略低。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</head>
<body>
<!--想實現登錄狀態的切換-->
<!--1. 定義界面
問題: 頁面中哪裏可能發生變化
本例中: 兩個div交替顯示隱藏
所以: 用v-if和v-else，並且用一個變量isLogin來記錄用戶是否登錄。如果isLogin值爲false，說明用戶未登錄，則只顯示第一個div。如果isLogin值爲true，說明用戶已登錄，則只顯示第二個div。
本例中: 點登錄按鈕，切換爲已登錄狀態，點註銷按鈕，切換爲未登錄狀態。所以需要給登錄按鈕和註銷按鈕都綁定單擊事件-->
<div id="app">
<div v-if="isLogin==false"><a href="javascript:;" @click="login">登錄</a> | <a href="javascript:;">註冊</a></div>
<div v-else>Welcome dingding, <a href="javascript:;" @click="logout">註銷</a></div>
</div>
<script>
//2. 創建new Vue()對象指向id爲app的元素區域
new Vue({
el:"#app",
//3. 定義模型對象保存界面所需的所有變量和事件處理函數
//問題: 界面中共需要幾個變量
//本例中: 界面中只需要一個isLogin變量，表示用戶是否登錄
data:{
isLogin:false,//開始時，用戶默認是未登錄
},
//本例中: 界面中共需要幾個事件處理函數
//login() 將isLogin改爲true，說明已登錄
//logout() 將isLogin改爲false，說明未登錄
methods:{
login(){ this.isLogin=true },
logout(){ this.isLogin=false }
}
})
</script>
</body>
</html>