前端只渲染一次标签

如果要让

元素只渲染一次，可以使用 v-once 指令。v-once 指令会确保元素及其所有的子节点只渲染一次，并且不会随后的数据变化而更新。修改模板如下：

<template>
  <div id="root">
    <h2>
      数据变化之前
    </h2>
    <button @click="changeMsg">改变 msg</button>
    <!-- 使用 v-once 指令使得 <p> 元素只渲染一次 -->
    <p v-once>{{ msg }}</p>
    <p v-once>{{ noSpaceAndLoweredMsg }}</p>
    <br/>
    <h2>数据变化之后</h2>
    <p>{{ msg }}</p>
    <p>{{ noSpaceAndLoweredMsg }}</p>
  </div>
</template>

这样，前两个

元素将只在页面加载时渲染一次，之后不会再随着数据变化而更新。