Vue系列之-v-once指令

·  阅读 154
概念:只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

代码:

<div id='app'>
     <span  v-once>{{message}}</span>
     <span>{{message}}</span>
     <button @click='btn'>改变</button>
</div>

	<script>
    new Vue({
    	el:'#app',
    	data:{
    		message:'124'
    	},
    	methods:{
    	  btn(){
             this.message='345'
    	  }
    	}
    })

	</script>复制代码

运行结果:124,124,点击改变之后显示,124,345

说明第一条有v-once 的数据不会二次渲染


分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改