Vue 條件渲染指令

和JavaScript的條件語句一樣，vue的條件指令可以根據表達式的值在dom中渲染或者銷燬元素/組件,常用的條件指令有：

• v-if
• v-else-if
• v-else

其中v-if可以單獨使用，v-else-if必須緊跟v-if，v-else必須緊跟v-else-if或者v-if。當表達式的值爲true時，當前元素/組件及所有的子節點都將會被渲染，反之被移除。

如果一次判斷的是多個元素或組件，那麼可以在元素上使用條件指令，最終渲染的結果不會包含該元素。

讓我們看個實例：

<!--條件渲染指令示例-->
<template>
  <div>
    <template v-if="inputType === 'name'">
      <label>用戶名：</label>
      <input placeholder="請輸入用戶名"/>
    </template>
    <template v-else-if="inputType === 'mail'">
      <label>郵箱：</label>
      <input placeholder="請輸入郵箱"/>
    </template>
    <template v-else>
      <label>手機號碼：</label>
      <input placeholder="請輸入手機號碼"/>
    </template>
    <button @click="changeInputType">切換輸入類型</button>
  </div>
</template>

<script>
  export default {
    name: "ConditionalRender",
    data() {
      return {
        inputType: 'name'
      }
    },
    methods: {
      changeInputType: function () {
        if (this.inputType === 'name') {
          this.inputType = 'mail';
        }
        else if (this.inputType === 'mail') {
          this.inputType = 'phone';
        }
        else {
          this.inputType = 'name';
        }

      }
    }
  }
</script>

<style scoped>
  label {
    font-weight: bold;
  }

  button {
    margin-left: 10px;
  }
</style>

運行程序：

然後，我們點擊按鈕進行切換：

我們試着在輸入框內輸入內容，進行切換：

切換後：

我們可以發現，輸入框的內容沒有發生變化，還是我們剛開始輸入的姓名。按照我們的猜測，切換後，輸入框應該是對應的placeholder內容。

這裏設計到vue的渲染機制，在渲染元素的時候，vue出於效率的考慮，會儘可能的複用已有的元素而非重新進行渲染，所以我們就會發現上面的現象，也就是說input元素被複用了。

那麼，如果我們不希望vue複用這些元素，我們可以使用vue提供的key屬性，它可以讓我們自己決定是否複用元素，注意一點：key值必須是唯一的。

我們修改上面的代碼，爲input元素添加key屬性：

<template v-if="inputType === 'name'">
      <label>用戶名：</label>
      <input placeholder="請輸入用戶名" key="name-input"/>
    </template>
    <template v-else-if="inputType === 'mail'">
      <label>郵箱：</label>
      <input placeholder="請輸入郵箱" key="mail-input"/>
    </template>
    <template v-else>
      <label>手機號碼：</label>
      <input placeholder="請輸入手機號碼" key="phone-input"/>
    </template>

運行程序：

切換：

好了，是不是和我們要求的一樣了呢。

另外要提的是v-show指令，該指令是改變元素的css屬性display。當v-show爲true時，元素會顯示，爲false時，元素會隱藏，dom結構中會給元素加上內聯樣式：display:none;.

示例：

<label v-show="true">我是v-show=true</label>
<label v-show="false">我是v-show=false</label>

運行程序：

我們查看下dom結構：

大家可以看到，確實和我們上面說的一樣，當v-show值爲false的時候，添加了display：none;的內聯樣式。

那麼v-if和v-show兩者都具有類似的功能，我們到底該選擇使用哪個呢？

v-show只是簡單的css屬性切換，無論其值如何，都會被編譯，相比v-show，v-if只有在條件第一次變爲真的時候纔開始編譯。

v-if更適合條件不經常改變的場景，應爲通過v-if進行切換開銷比較大，當你要頻繁進行顯示隱藏的切換時顯然v-show更加適合。