VueJS 渲染一次到一个元素中答案

【问题标题】：VueJS render once into an elementVueJS 渲染一次到一个元素中
【发布时间】：2017-04-06 06:47:24
【问题描述】：

是否可以只渲染一次到一个元素中？

假设我有一个 contenteditable div，并且只想渲染第一个值，然后随着模型的变化停止重新渲染。这里只会渲染variable的初始值。

<div contenteditable="true"> {{variable}} </div>

【问题讨论】：

标签： vue.js

【解决方案1】：

使用v-once

<div contenteditable="true" v-once> {{variable}} </div>

您也可以用<span> 包装它：

<div contenteditable="true">
  <span v-once> {{variable}} </span>
</div>

或者另一种解决方案是简单地克隆 variable 并且不要修改它，例如如果您将其称为 readOnlyVariable：

<div contenteditable="true"> {{readOnlyVariable}} </div>

【讨论】：

那主要是为了组件渲染，如果一个元素包含很多逻辑，我不能把v-once放在一个元素上。我只想渲染一次文本，而不是包裹在一个元素中.
你是什么意思如果它包含很多逻辑。？您可以将v-once 放在一个简单的div 中；你也可以用组件包装它
所以在内容可编辑的 div 上我有很多 v-on:、v-bind: 等。它只是我想要渲染一次的实际文本节点，包含在 {{variable }}，而不是包含的元素
简单地用 span 包裹起来<div contenteditable="true"><span v-once>{{variable}}</span></div>
或者直接克隆variable来渲染，不要修改克隆的