vue.js選擇if（條件渲染）詳解
一、總結
一句話總結：
v-if
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>v-if</title> 6 <link rel="stylesheet" type="text/css" href="css/style.css"> 7 <script type="text/javascript" src="js/vue.js"></script> 8 <script type="text/javascript"> 9 window.onload = function() { 10 var dataList = { 11 innerText: '大家好，歡迎來到麥子學院！', 12 display: true 13 }; 14 new Vue({ 15 el: 'section', 16 data: dataList 17 }); 18 19 setTimeout(function() { 20 dataList.display = false; 21 }, 5000); 22 }; 23 </script> 24 </head> 25 <body> 26 <section> 27 <div v-if="display" class="head face">{{ innerText }}</div> 28 </section> 29 </body> 30 </html>
1、vue.js中如何進行if判斷(條件渲染)？
v-if
<h1 v-if="ok">Yes</h1> 是以ok為鍵的鍵值對，控制ok這個鍵的值就可以動態控制顯示效果
v-if是直接控制元素有還是沒有，沒有的話就是打開控制台看不到，和display:none的效果不一樣
在字符串模板中，如 Handlebars，我們得像這樣寫一個條件塊：
<!-- Handlebars 模板 --> {{#if ok}} <h1>Yes</h1> {{/if}}在 Vue.js，我們使用 v-if 指令實現同樣的功能：
<h1 v-if="ok">Yes</h1>也可以用 v-else 添加一個 "else" 塊：
<h1 v-if="ok">Yes</h1> <h1 v-else>No</h1>
詳細示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>v-if</title> 6 <link rel="stylesheet" type="text/css" href="css/style.css"> 7 <script type="text/javascript" src="js/vue.js"></script> 8 <script type="text/javascript"> 9 window.onload = function() { 10 var dataList = { 11 innerText: '大家好，歡迎來到麥子學院！', 12 display: true 13 }; 14 new Vue({ 15 el: 'section', 16 data: dataList 17 }); 18 19 setTimeout(function() { 20 dataList.display = false; 21 }, 5000); 22 }; 23 </script> 24 </head> 25 <body> 26 <section> 27 <div v-if="display" class="head face">{{ innerText }}</div> 28 </section> 29 </body> 30 </html>
2、vue比普通的字符串模板的條件替換好在哪？
簡潔
在字符串模板中，如 Handlebars，我們得像這樣寫一個條件塊：
<!-- Handlebars 模板 --> {{#if ok}} <h1>Yes</h1> {{/if}}在 Vue.js，我們使用 v-if 指令實現同樣的功能：
<h1 v-if="ok">Yes</h1>也可以用 v-else 添加一個 "else" 塊：
<h1 v-if="ok">Yes</h1> <h1 v-else>No</h1>
3、vue.js中的if如何控制多個標簽的顯示隱藏？
template v-if
因為 v-if 是一個指令，需要將它添加到一個元素上。但是如果我們想切換多個元素呢？此時我們可以把一個 <template> 元素當做包裝元素，並在上面使用 v-if，最終的渲染結果不會包含它。
<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template>
4、template v-if和直接加父級div的v-if的區別是什么？
多 標簽
template標簽並不會顯示在頁面和控制台中，其實用div標簽同樣可以實現，但是用div會多一個div標簽
5、vue.js中根據條件展示元素的標簽是什么（和v-if相對的：v-show是display）？
v-show display
另一個根據條件展示元素的選項是 v-show 指令。用法大體上一樣：
<h1 v-show="ok">Hello!</h1>不同的是有 v-show 的元素會始終渲染並保持在 DOM 中。v-show 是簡單的切換元素的 CSS 屬性 display。
注意 v-show 不支持 <template> 語法。
6、vue.js中if-else結構如何實現？
v-else
可以用 v-else 指令給 v-if 或 v-show 添加一個 "else 塊"：
<div v-if="Math.random() > 0.5"> Sorry </div> <div v-else> Not sorry </div>v-else 元素必須立即跟在 v-if 或 v-show 元素的后面——否則它不能被識別。
7、v-if 和 v-show的區別在哪來？
存在 display
v-if是這個元素存在還是不存在，和php控制的標簽的顯示隱藏效果是一樣的
v-show是控制的display是否為none
在切換 v-if 塊時，Vue.js 有一個局部編譯/卸載過程，因為 v-if 之中的模板也可能包括數據綁定或子組件。v-if 是真實的條件渲染，因為它會確保條件塊在切換當中合適地銷毀與重建條件塊內的事件監聽器和子組件。
v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——在條件第一次變為真時才開始局部編譯（編譯會被緩存起來）。
相比之下，v-show 簡單得多——元素始終被編譯並保留，只是簡單地基於 CSS 切換。
一般來說，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換 v-show 較好，如果在運行時條件不大可能改變 v-if 較好。
二、內容在總結中
參考：vue 條件渲染_w3cschool
https://www.w3cschool.cn/aekdgs/rb8h2dn1.html