zoukankan      html  css  js  c++  java
  • 使用 v-cloak 防止页面加载时出现 vuejs 的变量名

    先来看一段代码:

    <ul v-for="item in items">
    
          <li>{{ item.name }}</li>
    
    </ul>

    当我们刷新页面的时候因为响应问题会看到 {{item.name}} 这个vue.js模板变量,这样给用户带来了不好的体验,那么要怎么解决这个问题呢?

    答案就是加上一个:

    v-cloak  

    代码如下:

    <ul v-cloak v-for="item in items">
    
         <li>{{ item.name }}</li>
    
    </ul>

    然后在css中添加

    [v-cloak] {
    
         display: none;
    
    }

    搞定!

    但是原理是什么呢?

    这段 CSS 的含义是,包含 v-cloak (cloak n. 披风,斗篷;vt. 遮盖,掩盖) 属性的 html 标签在页面初始化时会被隐藏。

    在 vuejs instance ready 之后,v-cloak 属性会被自动去除,也就是对应的标签会变为可见。

  • 相关阅读:
    怎样确定需求
    xampp进程和非进程执行
    将博客搬至CSDN
    管理心得
    数据库性能优化
    开发、架构总结
    activeMQ总结
    php数组操作函数
    Examples_08_08
    保险采购单的修复
  • 原文地址:https://www.cnblogs.com/gmq-sh/p/8043802.html
Copyright © 2011-2022 走看看