##使用class樣式
一共四種方式在注釋中有解釋
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"/> 7 <title>Document</title> 8 <script src="lib/vue.js" type="text/javascript" charset="utf-8"></script> 9 <style type="text/css"> 10 .red{ 11 color: red; 12 } 13 .thin{ 14 font-weight: 200; 15 } 16 .italic{ 17 font-style: italic; 18 } 19 .active{ 20 letter-spacing: 0.5em; 21 } 22 </style> 23 </head> 24 <body> 25 <div id="app"> 26 <!-- 第一種使用方式,直接傳遞一個數組,這里的class需要使用 v-bind 做數據綁定 --> 27 <!-- <h1 :class="['thin','italic']">這是一個很大很大的H1</h1> --> 28 29 <!-- 在數組中使用三元表達式 --> 30 <!-- <h1 :class="['thin', 'italic',flag?'avtive':'']">這是一個很大很大的H1</h1> --> 31 32 <!-- 在數組中使用 對象 替代三元表達式,提高代碼可讀性 --> 33 <!-- <h1 :class="['thin', 'italic',{'avtive':flag}]">這是一個很大很大的H1</h1> --> 34 35 <!-- 在為 class 使用 v-bind 綁定對象時,對象的屬性是類名,由於 對象的屬性可帶引號,也可不帶,所以這里沒寫引號,屬性的值 是一個標識符 --> 36 <h1 :class="classObj">這是一個很大很大的H1</h1> 37 </div> 38 39 <script type="text/javascript"> 40 var vm = new Vue({ 41 el:'#app', 42 data:{ 43 flag:true, 44 classObj:{ 45 red:true, 46 thin:true, 47 italic:false, 48 active:false 49 } 50 }, 51 methods:{ } 52 }) 53 </script> 54 </body> 55 </html>
##使用內聯樣式
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"/> 7 <title>Document</title> 8 <script src="lib/vue.js"></script> 9 </head> 10 <body> 11 <div id="app"> 12 <!-- 對象就是無序鍵值對集合 --> 13 <h1 :style="styleObj1">這是一個H1</h1> 14 </div> 15 <script type="text/javascript"> 16 var vm = new Vue({ 17 el:'#app', 18 data:{ 19 styleObj1:{ 20 color:'red', 21 'font-weight':200 22 } 23 }, 24 methods:{ 25 26 } 27 }) 28 </script> 29 </body> 30 </html>
##v-for循環
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"/> 7 <title>Document</title> 8 <script src="lib/vue.js"></script> 9 </head> 10 <body> 11 <div id="app"> 12 <p v-for="user in list">{{ user.id }}---------{{ user.name }}</p> 13 </div> 14 <script type="text/javascript"> 15 var vm = new Vue({ 16 el:'#app', 17 data:{ 18 list:[ 19 {id:1,name:'zs1'}, 20 {id:2,name:'zs2'}, 21 {id:3,name:'zs3'}, 22 {id:4,name:'zs4'} 23 ] 24 }, 25 methods:{ 26 27 } 28 }) 29 </script> 30 </body> 31 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"/> 7 <title>Document</title> 8 <script src="lib/vue.js"></script> 9 </head> 10 <body> 11 <div id="app"> 12 <!-- 注意:在遍歷對象身上的鍵值對的時候,除了有val key ,在第三個位置還有索引 --> 13 <p v-for="(val,key) in user">{{ val }}------{{ key }}</p> 14 </div> 15 <script type="text/javascript"> 16 var vm = new Vue({ 17 el:'#app', 18 data:{ 19 user:{ 20 id: 1, 21 name: 'Tony Stark', 22 gender:'男' 23 } 24 }, 25 methods:{ 26 27 } 28 }) 29 </script> 30 </body> 31 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"/> 7 <title>Document</title> 8 <script src="lib/vue.js"></script> 9 </head> 10 <body> 11 <div id="app"> 12 <!-- in后面我們放過 普通數組,對象數組,對象,還可以放數字 --> 13 <!-- 注意:如果使用v-for迭代數字,前面的count值從1開始 --> 14 <p v-for="count in 10">這是第 {{ count }} 次循環</p> 15 </div> 16 <script type="text/javascript"> 17 var vm = new Vue({ 18 el:'#app', 19 data:{ }, 20 methods:{ 21 22 } 23 }) 24 </script> 25 </body> 26 </html>
2.2.0+的版本中,在組件里使用v-for時,key是必須的.
當Vue.js用v-for正在更新已渲染過的元素列表時,它默認用"就地復用"策略,如果數據的順序被改變,Vue將不是移動DOM元素來匹配數據的順序,而是簡單復用此處每個元素,並且確保它在特定索引下顯示已被渲染過得每個元素
為了給Vue一個提示,以便它能跟蹤每個節點的身份,從而重用和重新排序現有元素,你需要為每項提供一個唯一的key屬性(string/number).
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"/> 7 <title>Document</title> 8 <script src="lib/vue.js"></script> 9 </head> 10 <body> 11 <div id="app"> 12 <div> 13 <label>Id: 14 <input type="text" v-model="id"/> 15 </label> 16 <label>Name: 17 <input type="text" v-model="name"/> 18 </label> 19 <label> 20 <input type="button" value="添加" @click="add"/> 21 </label> 22 </div> 23 24 <!-- 注意:v-for循環的時候key屬性只能使用number或string --> 25 <!-- 注意:key在使用的時候必須使用 v-bind 屬性綁定的形式指定key的值 --> 26 <!-- 在組件中使用v-for循環時或在一些特殊情況中,如果 v-for 有問題,必須 在使用v-for 的同時指定唯一的字符串/數字類型 :key值 --> 27 <p v-for="item in list" :key="item"> 28 <input type="checkbox"/>{{ item.id }}---------{{ item.name }}</p> 29 </div> 30 <script type="text/javascript"> 31 var vm = new Vue({ 32 el:'#app', 33 data:{ 34 list:[ 35 { id: 1,name:'李斯'}, 36 { id: 2,name:'嬴政'}, 37 { id: 3,name:'趙高'}, 38 { id: 4,name:'韓非'}, 39 { id: 5,name:'荀子'} 40 ] 41 }, 42 methods:{ 43 add(){ 44 this.list.unshift({id:this.id, name:this.name}) 45 } 46 } 47 }) 48 </script> 49 </body> 50 </html>
實例說明:
當第27行代碼中無 :key="item"時,運行后界面如下:
假如先勾選第五個,然后添加id為6,name為項目的元素,點添加按鈕后界面如下:
會發現在插入新元素后,勾選的仍是排序為第五個的元素,但是卻不是我們希望勾選的id為5的元素.
現在我們在第27行代碼中加入key,再試試添加新元素的效果.結果如下:
這就是為什么在使用v-for的時候后面必須加上key
##v-if和v-show的使用
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"/> 7 <title>Document</title> 8 <script src="lib/vue.js"></script> 9 </head> 10 <body> 11 <div id="app"> 12 <!-- <input type="button" value="toggle" @click="toggle"/> --> 13 <input type="button" value="toggle" @click="flag=!flag"/> 14 <!-- v-if 的特點是每次都會重新刪除或創建元素,有較高的切換性能消耗--> 15 <!-- v-show 的特點是不會重新進行dom的刪除和創建操作,只是切換了元素的 display:none 樣式 ,有較高的初始渲染消耗--> 16 17 <!-- 如果元素涉及到頻繁的切換,最好不要使用 v-if ,推薦使用v-show--> 18 <!-- 如果元素可能永遠也不會被顯示給用戶看到,則推薦使用 v-if --> 19 <h3 v-if="flag">這是用v-if控制的元素</h3> 20 <h3 v-show="flag">這是用v-show控制的元素</h3> 21 </div> 22 <script type="text/javascript"> 23 var vm = new Vue({ 24 el:'#app', 25 data:{ 26 flag : true 27 }, 28 methods:{ 29 // toggle(){ 30 // this.flag = !this.flag 31 // } 32 } 33 }) 34 </script> 35 </body> 36 </html>