vue之条件渲染

一、v-if

v-if指令用于条件的渲染一块内容，当指令的表达式返回true时，内容才会被渲染。

<h1 v-if="isshow">要显示么</h1>
 data () {
    return {
    isshow: true
    }
  }

如果想切换多个元素，可以使用<template>元素当作不可见的包裹元素。并在上面使用v-if，最终的渲染结果不包含<template>元素。

不使用template效果

 

 

二、v-else、v-else-if

使用 v-else 指令来表示 v-if 的“else 块”：v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if的元素之后。

 

当说showName的值为false的时候，v-if语句不执行，如果有v-else语句，就会执行。

也可以不写。

 

三、用key管理可复用的元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。当你使用v-if的内容中有复用的，也有不应该复用的元素，可以需添加一个具有唯一值的 key 属性，这样就不会再复用该元素，这两个元素是相互独立。（第一次没理解到位）

以下面的登录例子来说，我们有两种登录方式(用户名登录和邮箱登录)，如果不加key值，那么所有的元素都会复用。

也就是说如果用户先输入了用户名，后来又切换了登录方式，那么她之前输入的用户名不会被清空，需要自己清除，这样对用户体验来说是不友好的。

在input里加入了key以后，这两个input不会再复用，当用户切换登录方式后，之前用户输入的内容会被清空（视觉上清空），实际上是重新渲染了该文本框。

 

<template>
  <div class="box">
    <template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username" key="username-input">
    </template>
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address" key="email-input">
    </template>
    <button v-on:click="chage">其他登录方式</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      loginType: 'username'
    }
  },
  methods:{
    chage:function () {
      if(this.loginType != 'username'){
        return this.loginType = 'username'
      }
      return this.loginType = 'email'
    }
  }
}
</script>

四、v-show

用于根据条件展示元素的选项是 v-show 指令，带有v-show的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display，

当返回值为true，那么元素的display：true。（注意，v-show 不支持 <template> 元素，也不支持 v-else。）

<h1 v-show="ok">Hello!</h1>

五、v-if和v-show的区别（vue小白面试常问问题）

相同点：两者都可以控制一个元素的显示与否。

不同点：

1. 控制显示的方法不同：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；

2.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做，不会去渲染该元素；只有在条件第一次变为真时才开始局部编译; v-show是在不管初始条件是什么，都被编译，然后被缓存，而且DOM元素保留，只是简单的基于css进行切换；即v-if中当为true才会被加载渲染，为false不加载。v-show不管为true或flase，都会加载渲染

3.性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

4.使用场景：因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，当只需要一次显示或隐藏，则使用 v-if 较好。

六、遇到的实际情况

在项目里用iView的tabs标签页，里面的内容有一部分是请求回来的数据，还有一部分是按钮，当请求回来的数据为空时，将不再显示按钮，于是我就都使用了v-if来控制按钮的显示隐藏。一开始其实是没考虑到性能或者消耗问题，其实tabs标签切换的很频繁，每次都要重新数据，然后就出现了问题，按钮会出现闪一下，样式位置都会闪一下（一个很短暂的位置调整的现象），确定了并不是因为样式没固定。看到网上说：如果v-if内有多个元素，那么视觉上是元素先出现，再调整到设定位置的过程。我这个应该就是因为一开始数据还没请求到位，所以就短暂的出现一下子。

解决方案是直接把v-if改成了v-show，问题就解决了；尽管在网上也有看到说v-show也是有闪现的问题，然后用的v-cloak，我这里暂时还没试过。

 <div v-if="istruee" v-cloak>
        显示
    </div>

[v-cloak] {
    display:none;
}

 关于v-cloak的内容：https://blog.csdn.net/q3254421/article/details/83048594