Vue v-cloak指令

潮汐未见潮落

已于 2023-05-07 11:11:33 修改

阅读量599

点赞数 1

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2023-05-07 11:11:28 首次发布

本文链接：https://blog.csdn.net/qq_52855464/article/details/130540267

版权

vue 专栏收录该内容

47 篇文章 5 订阅

订阅专栏

在 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 也会覆盖掉元素中原本的内容。

文章如有错误，恳请大家提出问题，本人不胜感激。不懂的地方可以评论，我都会一一回复

文章对大家有帮助的话，希望大家能动手点赞鼓励，大家未来一起努力长路漫漫，道阻且长

潮汐未见潮落

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue v-cloak指令

介绍 Vue 的两种渲染普通文本的方法以及 Vue 的 v-cloak指令
复制链接

扫一扫

专栏目录