vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue v-if、v-if-else、v-else-if、v-show使用

Vue中v-if、v-if-else、v-else-if与v-show的基本使用

作者:东非不开森

v-if,v-else,v-else-if,v-if指令用于条件性地渲染一块内容,这块内容只会在指令的表达式返回truth值的时候被渲染,这篇文章主要给大家介绍了关于Vue中v-if、v-if-else、v-else-if与v-show的基本使用,需要的朋友可以参考下

一、Vue的条件渲染

1.1.v-if

⭐⭐

if 顾名思义,就是如果满足一个条件后,执行下面的步骤,和我们学的基础语法是一样的,只是这里在Vue中稍微换了一下而已

v-if=“条件” if后面的内容只有在条件为true时,才会被渲染出来

<div class="info" v-if="Object.keys(info).length">
        <h2>个人信息</h2>
        <ul>
          <li>姓名:{{info.name}}</li>
          <li>年龄:{{info.age}}</li>
        </ul>
 </div>

v-if的渲染原理:

1.2.v-if-else

⭐⭐

v-if-else

我们可以想到 基础语法的 if else

没错也是一样的道理 

v-if=“条件” 如果条件不满足,执行else

<div class="info" v-if="Object.keys(info).length">
   <h2>个人信息</h2>
</div>

 <div v-else>
  	<h2>没有输入个人信息</h2>
 </div>

1.3.v-else-if

⭐⭐

v-else-if 和if搭配使用

且v-else-if可以使用多次(一般用于多种情况下)

v-else-if 只能和if在一起使用

<h1 v-if="score > 90">优秀</h1>
<h2 v-else-if="score > 80">良好</h2>
<h2 v-else-if="score >= 60">及格</h2>
<h2 v-else>不及格啦</h2>

 1.4.template元素

⭐⭐

template:模板的意思

当我们不想让div这种元素被渲染的时候,可以使用template

因为template是作为占位符,用于包裹元素,自身并没有被渲染出来

注意点:每个组件根template (最外层的template)只能有一个子元素,非根template没有限制。

 template元素可以当做不可见的包裹元素,并且在v-if上使用,但是最终template不会被渲染出来:

<template v-if="Object.keys(info).length">
        <h2>个人信息</h2>
        <ul>
          <li>姓名:{{info.name}}</li>
          <li>年龄:{{info.age}}</li>
        </ul>
      </template>

<template v-else>
        <h2>没有输入个人信息</h2>
</template>

 1.5.v-show

⭐⭐

v-show的用法和v-if一样

<div v-show="isShowCode">
        <img
          src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/app_download_QR.cbe9f32.png"
          alt=""
        />
</div>

1.6.v-show和v-if的区别

⭐⭐

v-if和v-show区别

用法上:

v-show是不支持template;v-show不可以和v-else一起使用

本质的区别

v-show元素无论是否需要显示到浏览器上,它的DOM实际都是有存在的,只是通过CSS的display属性来进行切换;v-if当条件为false时,其对应的原生压根不会被渲染到DOM中;

如何选择

如果我们的原生需要在显示和隐藏之间频繁的切换,那么使用v-show;如果不会频繁的发生切换,那么使用v-if;

v-if

v-show

相比v-show就简单的多,不管初始条件是什么,元素始终都会被渲染,而且只是简单地基于css进行切换。

两者的使用

一般来说,v-if有更高的切换开销,而v-show有更高的初始渲染开销,因此,如果需要非常频繁地切换,则用v-show更好一些;如果运行的条件很少改变,则用v-if更好。

总结

到此这篇关于Vue中v-if、v-if-else、v-else-if与v-show基本使用的文章就介绍到这了,更多相关Vue v-if、v-if-else、v-else-if、v-show使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文