## v-if指令 **類型：** any **用法：** 根據表達式的值的真假條件渲染元素。在切換時元素及它的數據綁定 / 組件被銷毀并重建。如果元素是 `<template>` ，將提出它的內容作為條件塊。 >[info]示例 ~~~ <h1 v-if="ok">Yes</h1> ~~~ >[success]代碼示例1 ~~~ <div id="app"> <h1>Hello,Vue js!!</h1> <h1 v-if='yes'>Yes!</h1> <h1 v-if='no'>No!</h1> <h1 v-if='age >=25'>Age:{{age}}</h1> <h1 v-if='name.indexOf("jack") >=0'>Name:{{name}}</h1> </div> <script type="text/javascript"> var vm=new Vue({ el:'#app', data:{ yes:true, no:false, age:28, name:'abcdefg' } }) </script> ~~~ >[success]預覽：https://ityanxi.github.io/Vue-tutorial/chapter04/04v-if1.html 效果如圖：  - 這段代碼使用了4個表達式： - 數據的yes屬性為true，所以"Yes!"會被輸出； - 數據的no屬性為false，所以"No!"不會被輸出； - 運算式age >= 25返回true，所以"Age: 28"會被輸出； - 運算式name.indexOf('jack') >= 0返回false，所以"Name: keepfool"不會被輸出。 >[danger]注意：v-if指令是根據條件表達式的值來執行元素的插入或者刪除行為。 這一點可以從渲染的HTML源代碼看出來，面上只渲染了3個`<h1>`元素，v-if值為false的`<h1>`元素沒有渲染到HTML。  為了再次驗證這一點，可以在Chrome控制臺更改age屬性，使得表達式age >= 25的值為false，可以看到`<h1>`Age: 28`</h1>`元素被刪除了。  age是定義在選項對象的data屬性中的，為什么Vue實例可以直接訪問它呢？ 這是因為每個Vue實例都會代理其選項對象里的data屬性。 ## `<template>` 中 v-if 條件組 >[success]代碼示例2 ~~~ <div id="demo"> <template v-if="login"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template> </div> <script> var app=new Vue({ el:'#demo', data:{ login:true } }); </script> ~~~ 因為 v-if 是一個指令，需要將它添加到一個元素上。但是如果我們想切換多個元素呢？此時我們可以把一個` <template> `元素當做包裝元素，并在上面使用 v-if。最終的渲染結果不會包含 `<template>` 元素。 >[success]預覽：https://ityanxi.github.io/Vue-tutorial/chapter04/04v-if2.html 效果如圖：