Vue.js 开发加载时闪烁双括号问题

• vue加载data完成前闪烁双括号问题

1.使用v-text

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

但是只适用完整的文本插入,如果更新部分内容,就需要下面的v-cloak了

2.使用v-cloak

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

[v-cloak] {
  display: none;
}
<div v-cloak>
  {{ message }}
</div>