目錄
- 一、Vue中的v-if指令是什么？
- 二、v-if指令的使用
一、Vue中的v-if指令是什么？
v-if指令是根據表達值的真假，切換元素的顯示和隱藏， 本質是通過操縱dom元素來切換顯示狀態。
注意： 表達式的值為true，元素存在于dom樹中；為false，元素從dom樹中移除。
注意： 頻繁切換場景下使用v-show，反之使用v-if，因為前者的切換消耗相對小。
二、v-if指令的使用
1、v-on指令綁定的方法定義在methods屬性中。
2、v-on指令綁定的方法內部通過this關鍵字可以訪問定義在data中數據。
案例代碼執行如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>v-if指令</title>
</head>
<body><div id="app"><input type="button" value="切換顯示" @click="toggleIsShow"><p v-if="isShow">v-if指令根據表達值的真假,切換元素的顯示和隱藏（操縱dom元素）</p><p v-show="isShow">v-show指令是根據表達值的真假，切換元素的顯示和隱藏（display屬性）</p><h2 v-if="temperature>=35">熱死啦</h2></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{isShow:false,temperature:20},methods: {toggleIsShow:function(){this.isShow = !this.isShow;}},})</script>
</body></html>
程序執行效果如下：
點擊按鈕前
點擊按鈕后
