记录个人Vue.js从会用到精通之路 7

条件渲染

一我的在公司学习 特殊的周末 颇有意义

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

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

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

1. v-if 是“真正”的条件渲染，由于它会确保在切换过程当中条件块内的事件监听器和子组件适当地被销毁和重建。啥意思？意思就是若是值是false，这个dom元素直接886了，根本不在我们的html页面之中，至关于remove()。
2. v-if 是“惰性”的，若是初始值是false，那就很差意思了，这块元素我压根都不会渲染，直到值变为true。
3. v-show 与v-if相比而言，它必定会将元素渲染出来，而后再进行display值的切换。
4. 若是该元素可能被频繁的切换，直接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 ...
      }
  }
复制代码