掌握vue指令之(8)v-cloak和v-text指令

最新推荐文章于 2022-12-08 13:32:21 发布

猿音

最新推荐文章于 2022-12-08 13:32:21 发布

阅读量305

点赞数 1

分类专栏：笔记 vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43348064/article/details/106226313

版权

笔记同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

vue

21 篇文章 0 订阅

订阅专栏

(8).v-cloak和v-text指令

功能:防止用户短暂看到{{}},
问题:当网速慢时，如果js代码还未下载执行，则用户有可能短暂看到页面上的{{}}语法——尴尬！
解决方法
方法一.v-cloak指令
原理: 在new Vue()下载执行前，先将所有带{{}}的元素暂时隐藏。等到new Vue()下载执行完，再自动将所有{{}}的元素显示出来
步骤：

先在网页的style中定义一个属性选择器: [v-cloak]{ display:none }。意为所有带有v-cloak属性属性的元素，暂时隐藏
在有{{}}内容的元素上加上v-cloak属性，不用加=

结果: 所有带有v-cloak的元素，都暂时隐藏。直到new Vue()下载并执行完，自动找到所有v-cloak的元素，删除v-cloak属性。这些元素才显示出来！
示例：使用v-cloak防止用户短暂看到{{}}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /*凡是带有v-cloak属性的元素暂时都隐藏*/
    [v-cloak]{
      display:none
    }
  </style>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1 v-cloak>用户名:{{uname}}</h1>
    <h2 v-cloak>积分:{{score}}</h2>
  </div>
  <script>
    setTimeout(function(){
      new Vue({
        el:"#app",
        data:{
          uname:"dingding",
          score:1200
        }
      })
    },3000);
  </script>
</body>
</html>

运行结果: 等3s后出现
在这里插入图片描述
方法二：v-text指令
原理: 既然不想看到{{}}，就可以用一种特殊的指令代替{{}}，功能还一样！因为指令都是写在元素的属性中。即使没有加载完，用户也不可能看到元素的属性！
写法： <元素 v-text=“变量或js表达式”> </元素>
示例: 使用v-text代替防止用户短暂看到{{}}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1 v-text=`用户名:${uname}`></h1>
    <h2 v-text=`积分:${score}`></h2>
  </div>
  <script>
    setTimeout(function(){
      new Vue({
        el:"#app",
        data:{
          uname:"dingding",
          score:1200
        }
      })
    },3000);
  </script>
</body>
</html>