1. 首先, 指令后的引號內是可以寫 js 表達式的, 這點很重要. v-if 的用法很簡單, 只需要給 v-if = " " 的引號內放一個 布爾值 即可. 注意: v-if 的隱藏是不渲染這個 html 元素, 而非 display: none.
2. 但僅僅是上面這樣還無法運行, 還得實例化一個 Vue 對象, 並把 "#app" 節點傳進去, 下面是完整代碼.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <title>Vue Test</title> </head> <body> <div id="app"> <a href="#" v-if="false">Fly me to the Moon.</a> <script> var vApp = new Vue({ el: "#app" }) </script> </div> </body> </html>
3. 之所以要像上面這樣, 是因為 Vue 是通過 new Vue() 生成的實例對象來控制頁面渲染的. 如果沒有 Vue 實例對象, 或者, 實例對象內部不包含這個 id 為 app 的 html 元素, 則 Vue 的語法就會無效. 比如上面的 v-if
