Vue中加载数据时闪烁大括号

最新推荐文章于 2023-04-10 13:58:49 发布

奥芝国王

最新推荐文章于 2023-04-10 13:58:49 发布

阅读量697

点赞数

分类专栏： Vue 文章标签： Vue {{}}闪烁

本文链接：https://blog.csdn.net/CodeAries/article/details/100076058

版权

Vue 专栏收录该内容

0 篇文章

订阅专栏

Vue中解决加载数据时闪烁大括号

1.第一种方法 https://cn.vuejs.org/v2/api/#v-text

使用v-text标签

<div id="app">
    <!--如果页面过大或者使用{{}}过多,会造成{{}}闪烁的问题-->
    <span>{{msg}}</span>
    <span>{{msg}}</span>
    <span>{{msg}}</span>
    <span>{{msg}}</span>
    <!--可以使用v-text 指令-->
    <span v-text="msg"></span>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            msg:'message'
        }
    })
</script>

出现闪烁的问题,原因是因为浏览器从上往下加载,遇到{{msg}},先显示文本信息,遇到vue.js加载之后才知道被vue管理,所以闪动.

2.第二种方法https://cn.vuejs.org/v2/api/#v-cloak

如果觉得上面的方法比较麻烦,可以使用v-cloak指令

<style>
    [v-cloak] {
        display: none;
    }
</style>
<body>
<div id="app" v-cloak>
    <span>{{msg}}</span>
    <span>{{msg}}</span>
    <span>{{msg}}</span>
    <span>{{msg}}</span>
    <span>{{msg}}</span>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'message'
        }
    })
</script>

在vue入口处添加指令v-cloak,然后给v-cloak指定样式即可解决