記錄個人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 ...
      }
  }
複製代碼