• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > vue开发 > vue开发教程09:v-pre、v-cloak、v-once指令

    vue开发教程09:v-pre、v-cloak、v-once指令

    作者: 分类:vue开发 点击: 67 次
    wordpress CMS主题:ssmay主题

      前面我们介绍了几种常用的几个vue指令:v-if、v-else、v-show、v-bind、v-text、v-html等指令。本章我们再来介绍几个指令:v-pre指令、v-cloak指令、v-once指令。

      1:v-pre指令。

      该指令不会解析vue语法,在模板中跳过vue的编译,而是直接把vue代码输出页面。如:

      list:"高时银博客"

      <div v-pre>{{list}}</div>

      本来{{list}}是应该输出list属性的值 “高时银博客”,而使用了 v-pre 指令后,就直接输出源代码{{list}}。

      2:v-cloak指令。

      这个指令使用机率非常少。vue绑定数据时,渲染时会出现变量闪烁,例如

      <div class="#app">
      <p>{{value.name}}</p>
      </div>

      在加载时会看到{{value.name}}在页面出现,过几秒才会渲染数据。而v-cloak就是用来解决这个问题的,如:

      <div class="#app" v-cloak>
      <p>{{value.name}}</p>
      </div>

      在css里面要添加:

      [v-cloak] {
      display: none;
      }

      这样就可以防止页面闪烁了。不过,实际使用中,我很少看到变量闪烁的情况,也许是数据量太小的缘故吧。

      3:v-once指令。

      这个指令表示,只渲染一次。

      <div v-once>{{massage}}</div>
      <input v-model="massage" type="text">
      <div>{{massage}}</div>

      上面代码中,第一个div中的{{massage}}只渲染一次,当我们在input输入框中修改massge值时,第一个div因使用了v-once指令而不会再发生变化,而第二个div的内容会跟input内容变化而变化,如下图:

      vue开发教程09:v-pre、v-cloak、v-once指令

       



      QQ二维码

    文章作者:honor
    本文地址:http://wanlimm.com/77201809226972.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.