vue指令 v-once 只渲染元素和元件1次
阿新 • • 發佈:2020-12-21
只渲染元素和元件一次。隨後的重新渲染,元素/元件及其所有的子節點將被視為靜態內容並跳過。這可以用於優化更新效能。
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<div v-once>{{msg}}</div>
<div @click="changeMsg()">v-once</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
}
},
methods: {
changeMsg () {
this.msg = 'HiWorld'
}
},
async created () {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
點選 v-once 以後執行changeMsg方法之後,第一個msg發生變化;第二個不發生變化