v-text與直接插值沒有太大區(qū)別
v-html指令
(1)
<div v-myhtml="msg"></div>
vue.directive("myhtml",function(el,binging){
//v-html的原理
el.innerHtml=binging.value
})
new vue({
el:'#app',
data(){
return{msg:'<h2>好好學(xué)習(xí)</h2>'}
}
})
二岳守、key的作用
注意:如果只是展示列表數(shù)據(jù)譬猫,這里的可以是索引吮龄,如果列表中的數(shù)據(jù)會經(jīng)常發(fā)生變化絮吵,特別是列表的數(shù)據(jù)的位置會發(fā)生變化陌宿, 這個是key一定要設(shè)置為對象身上的唯一屬性锡足,比如:學(xué)號,工號壳坪,車牌號等等舶得,這樣做會大大提高列表重新渲染的性能損耗。
因為vue在渲染數(shù)據(jù)時爽蝴,先將數(shù)據(jù)生成一份虛擬DOM沐批,再將虛擬DOM生成對應(yīng)的真實DOM掛載到頁面中,如果兩份虛擬DOM中的key和key對應(yīng)的值完全相同蝎亚,不會重新生成對應(yīng)的真實DOM九孩,只有key和key對應(yīng)的值不同的虛擬DOM,才會生成新的真實DOM并掛載到頁面中
<li v-for="(item,index) in employees" :key="item.id">{{index}}----{{ item }}</li>