Vue.js: 條件渲染 v-if、v-show

條件渲染 v-if、v-show,並比較兩者差異。

v-if

若希望某區塊在特定條件下才出現,可以使用v-ifv-if-elsev-else依照運算結果決定出現的時機。

例 1

條件為 true 或 false 時才顯示。如下範例,依照 isShow 的值決定顯示的區塊,如果 isShow 為 true,顯示「條正成立」;反之,顯示「條件不成立」。

<div id="app">
  <div v-if="isShow">條正成立</div>
  <div v-else>條件不成立</div>
</div>
var vm = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    isShow: true
  }
});

// 由於部落格會把雙花括號的內容吃掉,所以設定 delimiters 以顯示完整程式碼。

例 2

將條件判斷寫在畫面上,依照運算結果決定顯示與否。如下程式碼所示,依照 type 決定要顯示的區塊。由於目前設定 type 為 B,因此畫面上會顯示 B。

<div id="app">
  <div v-if="type === A">A</div>
  <div v-elseif="type === B">B</div>
  <div v-else>C</div>
</div>
var vm = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    type: "B"
  }
});

打開瀏覽器會看到畫面顯示 B。

Vue.js: 條件渲染 v-if

使用 key 決定可重覆使用的元素

為了效能因素,若區塊元素切換只是因為為條件不同而帶入不同的值,元素不會重新渲染,只是替換掉不同的地方。

如下所示,根據 isShow 的真偽值決定顯示的區塊,但不論如何切換,使用者填入的 value 始終不會被清除,而只是替換掉不同的地方,即 placeholder 而已。

Vue.js: 條件渲染 v-if

<div id="app">
  <div v-if="isShow">
    <input type="text" placeholder="條件成立時的提示文字">
  </div>
  <div v-else>
    <input type="text" placeholder="條件不成立時的提示文字">
  </div>
  <button @click="toggle">切換顯示條件</button>
</div>
var vm = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    isShow: true
  },
  methods: {
    toggle: function() {
      this.isShow = !this.isShow;
    }
  }
});

若希望能有效區別,可加上 key 並帶入唯一值,這樣每次切換就會重新渲染,而非重覆使用已有元素。

於是,每次切換時,使用者輸入就會被清空了。

Vue.js: 條件渲染 v-if

<div id="app">
  <div v-if="isShow">
    <input type="text" key="123456789" placeholder="條件成立時的提示文字">
  </div>
  <div v-else>
    <input type="text" key="987654321" placeholder="條件不成立時的提示文字">
  </div>
  <button @click="toggle">切換顯示條件</button>
</div>

v-show

用法與v-if大致相同。

<div id="app">
  <div v-show="isShow">條正成立</div>
</div>

v-if 與 v-show 的差異

以上參考 Conditional Rendering


comments powered by Disqus