v-text与直接插值没有太大区别
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>好好学习</h2>'}
}
})
二、key的作用
注意:如果只是展示列表数据,这里的可以是索引,如果列表中的数据会经常发生变化,特别是列表的数据的位置会发生变化, 这个是key一定要设置为对象身上的唯一属性,比如:学号,工号,车牌号等等,这样做会大大提高列表重新渲染的性能损耗。
因为vue在渲染数据时,先将数据生成一份虚拟DOM,再将虚拟DOM生成对应的真实DOM挂载到页面中,如果两份虚拟DOM中的key和key对应的值完全相同,不会重新生成对应的真实DOM,只有key和key对应的值不同的虚拟DOM,才会生成新的真实DOM并挂载到页面中
<li v-for="(item,index) in employees" :key="item.id">{{index}}----{{ item }}</li>