zoukankan      html  css  js  c++  java
  • vue中的v-cloak指令

    v-cloak不需要表达式,它会在vue实例结束编译时从绑定的html元素上移除,经常和display:none;配合使用:

    <div id="app" v-cloak>
        <div :style="{'color':color,'fontSize':fontSize+'px'}">文本</div>
        {{message}}
    </div>
    
    new Vue({
        el:'#app',
        data:{
            color:'red',
            fontSize:'14',
            message:'文本'
        },
    })
    注意:

    这时虽然已经加了指令 v-cloak,但是实际这时没有起到任何作用,当网速较慢,Vue.js 文件还没有加载完时,在页面会显示{{message}}的字样,直到Vue创建实例、编译模版时,DOM才会被替换,所以这个过程屏幕是有闪动的,需要配合CSS可以解决这个问题。

    当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码。可以使用 v-cloak 指令来解决这一问题。

    <style type="text/css">
        [v-cloak] {
            display: none
        }
    </style>

    当我们使用webpack和vue-router时,项目中只有一个空的div元素,剩余的内容都是由路由去挂载不同组件完成的,所以不需要v-cloak。

    <div id="app" v-cloak><div :style="{'color':color,'fontSize':fontSize+'px'}">文本</div>{{message}}</div>
    new Vue({el:'#app',data:{color:'red',fontSize:'14',message:'文本'},})

  • 相关阅读:
    stl_hash_set.h
    stl_hash_map.h
    stl_algobase.h
    stl_relops.h
    stl_algo.h
    VC6常用插件
    visual assist(VA)设置快捷键(其它安装的插件设置快捷键也在这里)
    SVN常用命令说明
    Android 调用相册 拍照 实现系统控件缩放 切割图片
    Android 一个3D相册源码
  • 原文地址:https://www.cnblogs.com/rickdiculous/p/14578213.html
Copyright © 2011-2022 走看看