Vue02
綁定class樣式
-
字符串寫法，適用于：樣式的類名不確定，需要動態指定
-
數組寫法，適用于：要綁定的樣式個數不確定，名字也不確定
-
對象寫法，適用于：要綁定的樣式個數缺點，名字也確定，但是要動態決定用不用
…
//方式一
綁定style樣式
<div :style="styleObj">{{name}}</div>new Vue({....styleObj:{fontSize:"40px",color:"red",backgroundColor:'orange'}
})
條件渲染
-
v-if
-
寫法
-
v-if=“表達式”
-
v-else-if=“表達式”
-
v-else=“表達式”
-
適用于：切換頻率低的場景
-
特點：不展示的DOM元素直接被移除
-
注意：v-if可以和v-else-if,v-else 一起使用，但要求結構不能被打斷
-
-
v-show
-
寫法：v-show=“表達式”
-
適用于：切換頻率較高的場景
-
特點：不展示的DOM元素未被移除，僅僅使用樣式隱藏掉
-
-
注：使用v-if時，元素可能無法被獲取到，而使用v-show一定可以獲取到
注：template標簽不會破壞DOM結構
<div id="root5"><button @click="n++">n值加1</button><span>{{n}}</span><template v-if="n===1"><h1>好人</h1><h1>壞人</h1></template>
</div>
列表渲染
-
遍歷數組
-
遍歷對象
-
v-for 指令
-
用于展示列表數據
-
語法：v-for=“(item,index) in xxx” :key=“yy”
-
可遍歷：數組，對象，字符串（少），指定次數（少）
-
注：對象時，前面一個參數是val，后面的key
記憶：key也是一種另外的索引
理解key這個屬性
Vue中key有什么作用
-
虛擬DOM中key的作用
-
key是虛擬DOM對象的標識，當數據發生變化時，Vue會根據【新數據】生成【新的虛擬DOM】，隨后Vue進行【新虛擬DOM】與【舊虛擬DOM】的差異比較
-
比較規則
-
舊虛擬DOM中找到與新虛擬DOM相同的key
1. 若虛擬DOM中內容沒有改變，直接用之前的真實DOM2. 若改變了，則生成新的真實DOM，隨后替換掉頁面之前的真實DOM
- 沒有找到相同的key
1. 創建新的真實DOM，隨后渲染到頁面
-
用index作為key可能會引發的問題
-
若對數據進行：逆序添加，逆序刪除等破壞順序操作
1. 會產生沒有必要的真實DOM更新 ==>界面沒有問題，但效率低
- 如果結構中還包含輸入類的DOM
1. 會產生錯誤的DOM更新==>界面有問題
在開發中如何選擇key
-
最好使用每條數據的唯一標識作為key，比如id,手機號，身份證號，學號等唯一值
-
如果不存在對數據的逆序添加，逆序刪除等破壞順序操作，僅用于渲染列表用于展示，使用index作為key是沒有問題的
- {{person.name}} - {{person.gender}}
列表過濾
-
數據監視實現
-
計算屬性實現
<div id="root"><input type="text" placeholder="請輸入要查找的姓名" v-model="name_word"><ul><li v-for="person in serchPerson" :key="person.id" >{{person.name}} - {{person.gender}}</li></ul><button @click="addPerson">添加人員</button><br></div><script type="text/javascript">Vue.config.productionTip = false;new Vue({el:'#root',data:{personList:[{ name:'好人',id:'1',gender:'男',},{ name:'壞人',id:'2',gender:'男',},{ name:'光頭強',id:'3',gender:'男',},],personEnd:[],name_word:'',},methods: {addPerson(){this.personList.unshift({name:'大人',id:'4',gender:'女'})}},computed:{serchPerson(){return this.personList.filter((p)=>{return p.name.indexOf(this.name_word) !== -1})}}, })</script></body>
列表排序
<div id="root"><input type="text" placeholder="請輸入要查找的姓名" v-model="name_word"><ul><li v-for="person in serchPerson" :key="person.id" >{{person.name}} - {{person.gender}} - {{person.age}}</li></ul><button @click="addPerson">添加人員</button><br><br><button @click="type = 1">年齡升序</button><button @click="type = 2">年齡降序</button><button @click="type = 0"> 原順序</button>
</div>....computed:{serchPerson(){const arr = this.personList.filter((p)=>{return p.name.indexOf(this.name_word) !== -1})if(this.type){arr.sort((p1,p2) =>{return this.type === 1 ? p1.age - p2.age : p2.age - p1.age})}return arr}
},
