vue的v-if、v-else、v-else-if、v-show应用示例

v-if 条件判断使用v-if，（常见使用情况）在运行时条件不太可能改变时用v-if比较好；例如管理系统权限列表等

下面是应用v-if的示例：

<div v-if="ha" style="height:0.5rem;border:1px solid #000;">v-if示例div>

  data () {
    return {
       ha:true,
     }
    }

这样内容就显示出来啦；

v-else v-else必须跟在v-if或v-else-if后面；否则它将不被识别

v-else示例：

       <div v-if="type==='a'">adiv>
       <div v-else>bdiv>

  data () {
      return {
        type:'v',
      }
    },

这样else就显示出来了

v-else-if 充当 v-if 的“else-if 块”

  <div v-if="type==='a'">adiv>
  <div v-else-if="type==='b'">bdiv>
  <div v-else-if="type==='c'">cdiv>

 data () {
      return {
        type:'c',
      }
    },

这样c就显示出来啦！

需要注意的一点！！！Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染；

若v-if在切换逻辑复杂的控件时，在切换是会出现不重新渲染的问题；
那么怎么解决这个问题呢 ，就是在需要重新渲染的控件添加一个key属性，来唯一标识该控件；

这样就不会出现问题啦！

v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

将v-if的例子换在v-show上就同样适用；这里将不在展示代码！
下面是vue官网网址；希望会对大家有帮助！
https://cn.vuejs.org/v2/guide/list.html