1. 程式人生 > 其它 >Vue v-show和v-if區別

Vue v-show和v-if區別

vue中v-show和v-if的區別

  (1)、v-if和v-show用於檢視層進行條件判斷檢視展示

  (2)、v-if的原理是根據判斷條件來動態的進行增刪DOM元素v-show是根據判斷條件來動態的進行顯示和隱藏元素,頻繁的進行增刪DOM操作會影響頁面載入速度和效能,由此我們可以得出結論:

      當您的專案程式不是很大的時候,v-ifv-show都可以用來進行判斷展示和隱藏(這種場景使用v-if只是影響不大,並不是沒有影響);

      當您的專案程式比較大的時候,不推薦使用v-if來進行判斷展示和隱藏,推薦使用v-show

  (3)、只有v-if能和v-else連用進行分支判斷

v-show是不能和v-else連用的,如果出現多種條件場景的情況下,可以使用v-if來進行判斷

示例:

<template>
  <div>
    <div v-if="ifflag">v-if顯隱</div>
    <div v-show="showflag">v-show顯隱</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showflag:false,
      ifflag:
true }; } }; </script>