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

v-if 条件判断使用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'">a</div>
       <div v-else>b</div>

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

这样else就显示出来了

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

  <div v-if="type==='a'">a</div>
  <div v-else-if="type==='b'">b</div>
  <div v-else-if="type==='c'">c</div>

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

这样c就显示出来啦！

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

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

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username">
</template>
<template v-else>
  <label>Passworld</label>
  <input placeholder="Enter your email address" key="passworld">
</template>

这样就不会出现问题啦！

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

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