VUE——v-once指令
v-once指令
仅渲染元素和组件一次,并跳过之后的更新。
官网介绍
v-once用法:
<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 带有子元素的元素 -->
<div v-once><h1>comment</h1><p>{{msg}}</p>
</div>
<!-- 组件 -->
<MyComponent v-once :comment="msg" />
<!-- `v-for` 指令 -->
<ul><li v-for="i in list" v-once>{{i}}</li>
</ul>
例子:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="onceApp"><button @click="changeOnce()">改变aboutOnce值</button><div v-once>{{aboutOnce}}</div></div><script src="./vue.js"></script><script>new Vue({el: '#onceApp',data: {aboutOnce: '关于v-once的用法',changeOnce() {this.aboutOnce = "改变了"}},})</script>
</body></html>