欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue部分编译不生效,解决Vue渲染时候会闪一下

程序员文章站 2022-06-02 08:49:31
0828自我总结 Vue部分编译不生效,解决Vue渲染时候会闪一下 一.Vue编译不生效 在标签里添加 二.解决Vue渲染时候会闪一下 方法一: 方法二: 利用 在加载vue完成后他会消失,专业术语叫斗篷 ......

vue部分编译不生效,解决vue渲染时候会闪一下

一.vue编译不生效

在标签里添加v-pre

<script src="vue.js"></script>
<div>
    <p v-pre>{{msg}}</p>                  //网页中显示{{msg}}
    <p >{{msg}}</p>                       //网页中显示66
</div>

<script>
    new vue({
        el:'div',
        data:{
            msg:'66'
        },
    })
</script>

二.解决vue渲染时候会闪一下

方法一:

将导入vue放在需要用vue编译的位置前面

<script src="vue.js"></script>             //导入放前面
<div>
    <p >{{msg}}</p>                       //网页中显示66
</div>

<script>
    new vue({
        el:'div',
        data:{
            msg:'66'
        },
    })
</script>

方法二:

利用v-cloak在加载vue完成后他会消失,专业术语叫斗篷

<style>
    [v-cloak]{display:none}
<</style>   
<div>
    <p v-cloak>{{msg}}</p>                  
</div>
<script src="vue.js"></script>
<script>
    new vue({
        el:'div',
        data:{
            msg:'66'
        },
    })
</script>