在 Vue 中，渲染普通文本有 2 种方式：{ {}} 与 v-text
/* 以下两种方式都可以渲染普通文本 */
<div id="app">{
{msg}}</div>
<div id="app" v-text="msg"></div>
<script>
new Vue({
el: '#app',
data: {
msg: '欢迎Vue!'
}
})
</script>{ {}}
需要注意的是，在使用 { {}} 展示或更新页面数据时：当 网速比较慢时，会出现一个不好的过渡现象，会让用户先看到我们的表达式（ 上面页面中的 { {msg}} ），然后才看到 data 中的值（ 欢迎Vue! ）
这就是所谓的 闪烁问题
解决这个问题的方法：
使用 v-cloak 指令，然后为其设置 css 样式 display:none;
为了防止被其他优先级高的 dispaly:none 样式所覆盖。，所以最好再添加一个 !important ，将其优先级设置为最高
<style>
[v-cloak]{
display: none !important;
}
</style>
<body>
<div id="app" v-cloak>{
{msg}}</div>
<script>
new Vue({
el: '#app',
data: {
msg: '欢迎Vue!'
}
})
</script>
</body>v-text
默认 v-text 是没有闪烁问题，{ {}} 存在闪烁的问题
v-text 会覆盖掉元素中原本的内容，但是 { {}} 只会替换自己的这个占位符。(如下)
<div id="app" v-cloak>￥{
{msg}}元</div>
<script>
new Vue({
el: '#app',
data: {
msg: '100'
}
})
</script>最后输出的结果为：￥100元
<div id="app" v-text="msg">￥元</div>
<script>
new Vue({
el: '#app',
data: {
msg: '100'
}
})
</script>最后输出的结果为：100
{ {}}、v-text 与 v-html 的区别
- 前两个向页面渲染普通文本，后者向页面输出 html。
- 与 v-text一样，v-html 也会覆盖掉元素中原本的内容。
文章如有错误，恳请大家提出问题，本人不胜感激 。 不懂的地方可以评论，我都会 一 一 回复
文章对大家有帮助的话，希望大家能动手点赞鼓励，大家未来一起努力 长路漫漫，道阻且长