02-指令v-cloak的用法

最新推荐文章于 2024-03-17 21:04:26 发布

Galio_SYY

最新推荐文章于 2024-03-17 21:04:26 发布

阅读量198

点赞数

分类专栏： vue基础前端基础文章标签： vue

本文链接：https://blog.csdn.net/Galio_SYY/article/details/107093460

版权

vue基础同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

前端基础

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  [v-cloak]{
    display: none;
  }
  </style>
</head>
<body>
  <div id="app">
    <div v-cloak>{{msg}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      v-cloak指令的用法
      1、提供样式
        [v-cloak]{
          display: none;
        }
      2、在插值表达式所在的标签中添加v-cloak指令

      背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Hello Vue'
      }
    });
  </script>
</body>
</html>