当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Vue部分编译不生效,解决Vue渲染时候会闪一下

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

2019年08月28日  | 移动技术网IT编程  | 我要评论

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>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网