vue指令之v-cloak, v-text, v-bind, v-on 及插值表达式闪烁问题

最新推荐文章于 2021-12-31 22:22:07 发布

ey蜡笔没了小新

最新推荐文章于 2021-12-31 22:22:07 发布

阅读量514

点赞数

分类专栏： vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/control_ling/article/details/104435189

版权

vue.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

v-cloak指令，解决插值表达式闪烁问题

在渲染data中的数据的时候，常见的一个方式是使用插值表达式“{{ }}”，但是使用插值表达式会存在一个闪烁问题

<body>

  <div id="app">
    <p>{{ msg }}</p>
  </div>

  <script>
    var vm = new Vue({
      el: '#app', 
      data: { 
        msg: '欢迎学习' 
      }
    })
  </script>

</body>

什么是闪烁?

如果用户浏览网页的时候网速足够快的话，并不明显，再调试的时候：F12 👉 Network 👉 网速调为 Slow 3G，刷新页面就会发现页面在还未加载出数据的时候会把插值表达式显示出来，如下图：

怎么解决插值表达式闪烁问题？

在 p 标签中加入 v-cloak 属性

<p v-cloak>{{ msg }}</p>

给 v-cloak 添加 display 样式

<head>
  <!-- some codes -->
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>

v-text指令

相对于插值表达式， v-text 是没有闪烁问题的，使用方式如下：

<h4 v-text="msg"></h4>

既然 v-text 和 v-cloak 指令都可以避免闪烁问题，那么他们之间的区别在哪里?

<p v-cloak>++++++++ {{ msg }} ----------</p>
<h4 v-text="msg">==================</h4>

运行结果：

可以发现，v-text 会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空

v-html指令

<div>{{msg2}}</div>
<div v-text="msg2"></div>
<div v-html="msg2">1212112</div>

其中，data 中 msg2 为 “<h1>哈哈，我是一个大大的H1，我大，我骄傲</h1>”

运行结果：

可以看出，v-text 和 v-html 的区别：v-html指令输出html，而其他的只是把数据当成了一个字符串，不会识别<h1>标签

v-bind指令

<body>

  <div id="app">

    <input type="button" value="按钮" v-bind:title="mytitle + '123'">

  </div>


  <script src="./lib/vue-2.4.0.js"></script>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        mytitle: '这是一个自己定义的title'
      }
    })
  </script>

</body>

v-bind: 是 Vue中，提供的用于绑定属性的指令

注意： v-bind: 指令可以被简写为 :要绑定的属性

v-bind 中，可以写合法的JS表达式

v-on 指令（事件绑定机制）

<body>

  <div id="app">

    <input type="button" value="按钮" v-on:click="show">

  </div>


  <script src="./lib/vue-2.4.0.js"></script>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
       
      },
      methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
        show: function () {
          alert('Hello')
        }
      }
    })
  </script>

</body>

注意，v-on: 指令可以简写成 @要绑定的时间

ey蜡笔没了小新

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue指令之v-cloak, v-text, v-bind, v-on 及插值表达式闪烁问题

v-cloak指令，解决插值表达式闪烁问题在渲染data中的数据的时候，常见的一个方式是使用插值表达式“{{ }}”，但是使用插值表达式会存在一个闪烁问题<body> <div id="app"> <p>{{ msg }}</p> </div> <script> var vm = ne...
复制链接

扫一扫