一、问题
- vue界面渲染中显示大括号源码的问题
- 屏幕闪动,先显示{}，再显示msg内容
- 看图片展示效果
二、解决方案
-
添加 v-cloak
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
-
使用 v-text
更新元素的 textContent。如果要更新部分的 textContent，需要使用 {} 插值。 -
看图片展示效果
（1）使用 v-cloak方法
- 在样式中加入 [v-cloak]
<style type="text/css">
/* css代码 */
[v-cloak] {
display: none !important;
}
</style>
- 在vue对象的上面也要加上 v-cloak
/* html代码 */
<div id="app" v-cloak>
{{msg}}
</div>
- 看一下完整的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>如何解决vue界面渲染中显示大括号源码、并且屏幕闪动的问题，详解v-cloak</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
<style type="text/css">
/* css */
[v-cloak] {
display: none !important;
}
</style>
</head>
<body>
<div id="app" v-cloak>
{{msg}}
</div>
</body>
<script type="text/javascript">
//为了看到明显的效果，我们加一个延迟
setTimeout(function () {
var app = new Vue({
el: '#app',
data: {
msg: 'hello，everybody ！！！'
}
})
}, 1000)
</script>
</html>
（2）使用 v-text方法
<div v-text="msg"></div>
<!-- 和下面的效果一样，但是不会出现{{msg}}的闪动 -->
<div>{{msg}}</div>
- 直接看代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>如何解决vue界面渲染中显示大括号源码、并且屏幕闪动的问题 v-text</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
</head>
<body>
<div id="app" v-text="msg">
</div>
</body>
<script type="text/javascript">
//为了看到明显的效果，我们加一个延迟
setTimeout(function () {
var app = new Vue({
el: '#app',
data: {
msg: 'hello，everybody ！！！'
}
})
}, 1000)
</script>
</html>