vue學習筆記(五)條件渲染和列表渲染
前言
在衆多的編程語言中，咱們的基礎語法老是少不了一些專業語法，好比像定義變量，條件語句，for循環，數組，函數等等，vue.js這個優秀的前端框架中也有一樣的語法，咱們換一個名詞，將條件語句改爲專業詞彙叫作條件渲染，循環語句改爲專業詞彙叫作列表渲染，這樣比較舒服一點。javascript
本章目標
-
學會條件渲染的使用css
-
學會可複用的key的使用html
-
學會列表渲染的使用前端
條件渲染
1.v-if的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app01"> <span v-if="type==='A'">成績爲A</span> </div> <script src="../js/vue.js"></script> <script> let vm=new Vue({ el:'#app01', data:{ type:'A' }, methods:{ }, watch:{ }, computed:{ } }) </script> </body> </html>
結果：成績爲Avue
v-if判斷條件是否相等，就像if同樣，若是相等，那麼值就會true,與之對應的還有v-else,v-else-ifjava
2.v-else的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app01"> <span v-if="type==='A'">成績爲A</span> <span v-else>成績爲B</span> </div> <script src="../js/vue.js"></script> <script> let vm=new Vue({ el:'#app01', data:{ type:'B' }, methods:{ }, watch:{ }, computed:{ } }) </script> </body> </html>
結果:成績爲B編程
小練習
咱們作一個小練習，鞏固一下v-if和v-else的使用，需求以下：點擊一個按鈕時,按鈕上的文字變爲顯示，再次點擊時按鈕上的文字變爲隱藏，當按鈕上的文字顯示隱藏時，顯示紅色，按鈕上的文字變爲顯示時顯示藍色數組
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 100px; height: 100px; } .red{ background: red; } .blue{ background: blue; } </style> </head> <body> <div id="app"> <button @click="handleClick">{{text}}</button> <div v-if="show" class="box red"></div> <div v-else class="blue box"></div> </div> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> let vm=new Vue({ el:'#app', data:{ show:true, text:'隱藏' }, methods:{ handleClick(){ this.show=!this.show; this.text=this.show?'隱藏':'顯示' } } }) </script> </body> </html>
結果
3.v-else-if的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app01"> <input type="text" v-model="type"/> <div v-if="type==='A'">成績爲A</div> <div v-else-if="type==='B'">成績爲B</div> <div v-else-if="type==='C'">成績爲C</div> <div v-else>不及格</div> </div> <script src="../js/vue.js"></script> <script> let vm=new Vue({ el:'#app01', data:{ type:'' }, methods:{ }, watch:{ }, computed:{ } }) </script> </body> </html>
結果:
4.v-show
提及這個v-show，其實和v-if有與曲同工的妙處，可是又有不一樣的地方，咱們來看下示例你就秒懂了前端框架
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 100px; height: 100px; } .red{ background: red; } .blue{ background: blue; } </style> </head> <body> <div id="app"> <div v-show="show" class="box red"></div> <button @click="handleClick()">{{text}}</button> </div> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> let vm=new Vue({ el:'#app', data:{ show:true, text:'隱藏', }, methods:{ handleClick(){ this.show=!this.show; this.text=this.show?'隱藏':'顯示' } }, computed:{ } }) </script> </body> </html>
當按鈕變爲顯示的時候，背景顏色消失，這裏就不截圖了，有興趣的小夥伴能夠本身去嘗試，既然v-if能夠幫咱們實現元素的顯示和隱藏，那咱們還須要v-show幹什麼呢？不妨看下接下來的實例。app
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 100px; height: 100px; } .red{ background: red; } .blue{ background: blue; } </style> </head> <body> <div id="app"> <div v-show="show" class="box red"></div> <div class="box blue" v-if="show"></div> <button @click="handleClick()">{{text}}</button> </div> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> let vm=new Vue({ el:'#app', data:{ show:true, text:'隱藏', }, methods:{ handleClick(){ this.show=!this.show; this.text=this.show?'隱藏':'顯示' } }, computed:{ } }) </script> </body> </html>
當咱們點擊按鈕的時候
如今結果已經出來了，使用v-show的dom元素，dom元素只是簡單的切換display屬性，而v-if會將dom元素移除，當咱們再次點擊時，v-if又會從新渲染元素，可想而知若是頻繁的切換的話，那麼有多麼的耗費性能，所以我總結了以下幾點
-
頻繁的切換顯示/隱藏要使用v-show
-
只判斷一次時，使用v-if
5.減小dom的生成
咱們都知道js操做dom元素是很是消耗性能的，可是咱們須要儘可能的避免這個問題，vue中爲咱們提供了一個template標籤，這個標籤叫作模板(至於什麼叫作模板，後期的博客會講到)，咱們先看一個示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 100px; height: 100px; } .red{ background: red; } .blue{ background: blue; } </style> </head> <body> <div id="app"> <div v-if="show"> <div class="box red"></div> <div class="box blue"></div> </div> </div> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> let vm=new Vue({ el:'#app', data:{ show:true, }, methods:{ }, computed:{ } }) </script> </body> </html>
咱們想讓圖上的那個div消失，不想爲了管理同一組元素而多生成一個節點，這樣是很是消耗性能的，咱們將div標籤變成template標籤
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 100px; height: 100px; } .red{ background: red; } .blue{ background: blue; } </style> </head> <body> <div id="app"> <div v-if="show"> <div class="box red"></div> <div class="box blue"></div> </div> <template v-if="show"> <div class="box red"></div> <div class="box blue"></div> </template> </div> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> let vm=new Vue({ el:'#app', data:{ show:true, }, methods:{ }, computed:{ } }) </script> </body> </html>
如今我有心中萌生了一個想法，v-if可使用template,那麼v-show是否可使用呢？
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 100px; height: 100px; } .red{ background: red; } .blue{ background: blue; } </style> </head> <body> <div id="app"> <template v-if="show"> <div class="box red"></div> <div class="box blue"></div> </template> <template v-show="show"> <div class="box red"></div> <div class="box blue"></div> </template> <button @click="handleClick()">{{text}}</button> </div> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> let vm=new Vue({ el:'#app', data:{ show:true, text:'隱藏', }, methods:{ handleClick(){ this.show=!this.show; this.text=this.show?'隱藏':'顯示' } }, computed:{ } }) </script> </body> </html>
答案是v-if可使用template，而v-show不能使用template
vue中用key管理可複用的元素
Vue 會盡量高效地渲染元素，一般會複用已有元素而不是從頭開始渲染。這麼作除了使 Vue 變得很是快以外，還有其它一些好處。例如，若是你容許用戶在不一樣的登陸方式之間切換。
示例一：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app01"> <template v-if="type==='username'"> <label>用戶名</label> <input type="text" placeholder="請輸入您的帳號" /> </template> <template v-else> <label>郵箱</label> <input type="text" placeholder="請輸入您的郵箱" /> </template> <p> <a href=""@click.prevent="type='username'">用戶名登陸</a>| <a href=""@click.prevent="type='email'">郵箱登陸</a> </p> </div> <script src="../js/vue.js"></script> <script> let vm=new Vue({ el:'#app01', data:{ isShow:true, type:'username' }, methods:{ }, watch:{ }, computed:{ } }) </script> </body> </html>
結果：
當咱們在用戶名登陸和郵箱切換的時候，咱們發現咱們輸入的內容始終保持，爲何呢?總的來講，由於兩個模板使用了相同的元素，input不會被替換掉——僅僅是替換了它的 placeholder屬性，這樣也不老是符合實際需求，因此 Vue 爲你提供了一種方式來表達這兩個元素是徹底獨立的,不要複用它們,只需添加一個具備惟一值的key屬性便可。
示例二:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app01"> <template v-if="type==='username'"> <label>用戶名:</label> <input type="text" placeholder="請輸入您的用戶名" key='usename'/> </template> <template v-else> <label>郵箱:</label> <input type="text" placeholder="請輸入您的郵箱" key='email'/> </template> <p> <a href=""@click.prevent="type='username'">用戶名登陸</a>| <a href=""@click.prevent="type='email'">郵箱登陸</a> </p> </div> <script src="../js/vue.js"></script> <script> let vm=new Vue({ el:'#app01', data:{ isShow:true, type:'username' }, methods:{ }, watch:{ }, computed:{ } }) </script> </body> </html>
結果：
如今咱們點擊切換的時候，輸入框都會從新渲染，固然咱們的<label>標籤依舊的高效的複用，由於它沒有添加key。
列表渲染
咱們用v-for指令根據一組數組的選項列表進行渲染，v-for指令須要以item in items的形式的特殊語法，items是原數據數組而且item是元素迭代的別名
1.v-for的基本使用
語法：(item,index) in|of items
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>v-for的基本使用</title> </head> <body> <div id="app"> <ul> <li v-for="(item) in arr">{{item}}</li> </ul> </div> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> let vm=new Vue({ el:'#app', data:{ arr:['apple','banana','pear'] }, methods:{ }, computed:{ } }) </script> </body> </html>
結果：
固然v-for中也能夠帶第二個參數index
2.v-for中帶索引
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>v-for的基本使用</title> </head> <body> <div id="app"> <ul> <li v-for="(item,index) in arr">{{item}}--{{index}}</li> </ul> </div> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> let vm=new Vue({ el:'#app', data:{ arr:['apple','banana','pear'] }, methods:{ }, computed:{ } }) </script> </body> </html>
3.v-for迭代字符串
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>v-for的基本使用</title> </head> <body> <div id="app"> <ul> <li v-for="(item,index) in arr">{{item}}--{{index}}</li> </ul> <ul> <li v-for="item in 'helloworld'">{{item}}</li> </ul> </div> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> let vm=new Vue({ el:'#app', data:{ arr:['apple','banana','pear'] }, methods:{ }, computed:{ } }) </script> </body> </html>
4.v-for迭代對象
語法：(value,key,index) of | in items
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>v-for迭代對象</title> </head> <body> <div id="app"> <ul> <li v-for="(value,key,index) of obj">{{value}}-{{key}}-{{index}}</li> </ul> </div> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> let vm=new Vue({ el:'#app', data:{ obj:{ name:'kk', age:18, sex:'male' } }, methods:{ }, computed:{ } }) </script> </body> </html>
結果:
5.v-for迭代整數
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>v-for迭代對象</title> </head> <body> <div id="app"> <ul> <li v-for="(value,key,index) of obj">{{value}}-{{key}}-{{index}}</li> </ul> <ul> <li v-for="item in 10">{{item}}</li> </ul> </div> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> let vm=new Vue({ el:'#app', data:{ obj:{ name:'kk', age:18, sex:'male' } }, methods:{ }, computed:{ } }) </script> </body> </html>
結果：
注意：但咱們迭代整數的時候，item從1開始而不是從0開始
總結
在本章內容中，咱們一共學習了三個知識點，分別是條件渲染的使用(v-if,v-else,v-else-if),管理可複用的key,列表渲染(v-for的基本使用等等)，本章的內容也多可是在實際應用上很是普遍，畢竟這些是很是基礎的語法，基礎不牢，地動山搖，學習任何東西都須要本身一步一個腳印走出來。
相關文章
- 1. Vue學習筆記(四) 條件渲染和列表渲染
- 2. Vue——條件渲染&列表渲染
- 3. Vue條件渲染與列表渲染
- 4. Svelte學習筆記五----列表渲染+異步渲染
- 5. Vue學習筆記（條件渲染、列表渲染、Class與Style綁定）
- 6. 條件渲染，列表渲染
- 7. 列表渲染與條件渲染
- 8. vue-學習筆記-列表渲染
- 9. Vue中的樣式綁定、條件渲染和列表渲染
- 10. Vue 的條件渲染和列表渲染
- 更多相關文章...
- • Scala List(列表) - Scala教程
- • XSL-FO 列表 - XSL-FO 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章