• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > vue开发 > vue开发教程07:vue指令v-if、v-else、v-show

    vue开发教程07:vue指令v-if、v-else、v-show

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

      在vue开发过过程中,有时需要对情况进行一些判断,如果达到要求就显示,达不到就不显示。这时,我们就会用到vue指令中的判断指令:v-if、v-else、v-show这几个指令。下面就一起来看看这几个判断指令吧。

      1:v-if指令。

      v-if指令,是根据判断来是否执行。如下:

      <div v-if="flag">如果flag=true时,就显示</div>

      date(){
      return {
      flag: true,
      }
      }

      2:v-else指令

      v-else指令必须跟v-if指令结合起来使用。如下:

      <div v-if="flag">如果flag=true时,就显示</div>
      <div v-else>否则就显示这个</div>

      date(){
      return {
      flag:true,
      }
      }

      当然,跟JS的if语句一样,也有一个  v-else-if  指令,在多条件情况下结束  v-if 和  v-else  使用,使用与 v-if指令一样,这里就不多说了。

      3:v-show指令。

      这个指令跟v-if有点类似,也是根据判断是否显示,与v-if不同的是,它只判断是否显示,跟CSS中的display:none类似,被渲染的元素会一直在DOM中。而v-if指令如果为假时,被渲染元素会不存在。如下:

      <div v-show="flag">如果flag=true时,就显示</div>

      如果flag=true时,该元素的display:block(显示),如果flag=false时,该元素display:none(不显示)。

       



      QQ二维码

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

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

    或许你会感兴趣的文章:

    发表评论

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

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