vue-cli v-html指令和key的作用

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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容