条件渲染

一个人在公司学习特殊的周末很有意义

v-if

v-if的作用

这个指令对大家来说应该太熟悉了，它用来条件性的渲染所选中的dom元素。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。如果我们想要去控制多个元素呢？在vue中我们可以使用< template >这个元素来进行包裹，有点像文档碎片，并不会产生一个无用的新标签，但依旧可以达到目的！
v-else和v-else-if

故名思议，我想大家懂的都懂。值得注意的是，他们俩都只能紧紧跟随在带v-if元素之后，中间可以有注释，但是坚决不能有多余的元素或者文本，否则会报错。
key值的作用

Vue会尽可能快的去渲染元素，那它就会复用一些元素，咱们来看一下下面这个例子（取自官方文档）。
```
<template v-if="myInput">    //  myInput初始值为 true
  <label>username:</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>password:</label>
  <input placeholder="Enter your password">
</template>
<button @click="myInput = !myInput"></button>
```
当myInput的值是true的时候，用户可以输入username，当点击按钮时，username框消失，password框出现。但是vue为了提高性能，一看，哎呀这label元素和input元素两边都有呀，那我干脆不用完全清楚掉嘛，我给它换个属性，换个文本不就好了。

这样一来，Vue渲染的更快，但是也有个问题，因为复用了input元素，那在切换之后，password框内显示的是刚才在username中输入的值，这怎么办呢？我们如何来告诉vue，这俩input框不是一个玩意儿，你不许复用。 属性key
```
<template v-if="myInput">  
  <label>username:</label>
  <input placeholder="Enter your username" key="input1">
</template>
<template v-else>
  <label>password:</label>
  <input placeholder="Enter your password" key="input2">
</template>
<button @click="myInput = !myInput"></button>
```
解决！但是要注意的一点是，我们只给input框添加了不同的key值，而label元素并没有，所以label元素仍然会被Vue高效的复用哦～

v-show

提起了v-if，避不开的就是v-show。

v-show的作用

和v-if作用一样！！！也是根据表达式返回 truthy值来进行相应操作的。

v-if对比v-show

既然他们俩一样，那我随便用咯。

万万不可，他们之间是有区别的。

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。啥意思？意思就是如果值是false，这个dom元素直接886了，根本不在咱们的html页面之中，相当于remove()。
v-if 是“惰性”的，如果初始值是false，那就不好意思了，这块元素我压根都不会渲染，直到值变为true。
v-show 与v-if相比而言，它一定会将元素渲染出来，然后再进行display值的切换。
如果该元素可能被频繁的切换，直接v-show，毕竟v-if来回切换元素是耗费性能的。反之直接上v-if！

v-if与v-for合不来

并不是说他俩一起出现在同一元素上就报错，就不好使，不是这样的。是因为v-for会比v-if拥有更高的优先级，会造成v-for白忙活一场。举个栗子～(个人理解，欢迎指正)

<ul>
  <li v-for="item in items" v-if="item.isShow" ></li>
</ul>

在这个demo里，我们要去遍历出一大堆item，然后根据item上的isShow属性来判断是否需要渲染。由于v-for的优先级高于v-if，所以一旦页面加载，或者items发生改变，我们都需要把这个数组遍历一遍（v-for），然后再去挨个判断v-if的情况。这样子，就算这个元素不需要渲染，我们也遍历了一回。假设有100个item，但是只有一个item.isShow是真值，那咱不就亏大了？为了它一个元素，遍历一个数组，浪费我这么多性能。所以，我们可以使用computed，先计算出渲染列表，再对其进行遍历。

  <li v-for="item in activeItems" ></li>
  
  computed:{
      activeItems(){
          return ...
      }
  }

记录我的Vue.js从会用到精通之路 7