vue.js 未加载页面时会闪{{ }} （花括号）

Question

vue.js 未加载页面时会闪{{ }} （花括号）

Answer 1

可以使用 template 标签，在没有编译之前，是不会显示的；

<template v-text="msg"></template >

这是我写demo，可以参考 demo，或者参考官方的 demo vue-cli

Answer 2

是的，vue 当然会考虑到这个问题，解决方案就是使用v-cloak指令，配合 css 使用，可以将没有编译完成的元素隐藏，待元素编译链接完成再显示出来，详情可以参见 https://cn.vuejs.org/api/#v-cloak

Answer 3

优先使用v-text
如果必须用花括号拼接的话在上层加上v-cloak标签,并在css中配合样式:

[v-cloak] {
  display: none;
}

参考:v-cloak

Answer 4

使用v-bind看看，angular也有同样的问题，应该是同样的道理。

Answer 5

v-text
v-html

Answer 6

最简单的方法，把vue.js在head标签内引入 :-D

Answer 7

我是v-cloak和v-if一起用，v-cloak解决出现花括号一闪而过的情况，在一些特殊老版本浏览器中第一次加载总是不好好渲染，所以用了v-if判断再渲染