vue隱藏資料怎麼顯示

在 Vue 中，我們可以透過 v-if、v-show、computed 計算屬性或 methods 方法等方式來隱藏或顯示資料。下面，我們來具體了解這幾種方式。

1. v-if/v-else 控制顯示

<template>
  <div>
    <div v-if="isShow">这是要显示的数据</div>
    <div v-else>这是要隐藏的数据</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false
    }
  }
}
</script>

在這個範例中，我們透過一個布林類型的資料 isShow 來控制要顯示還是要隱藏資料。當 isShow 的值為 true 時，要顯示的資料會顯示出來；反之則會隱藏。

2. v-show 控制顯示

<template>
  <div>
    <div v-show="isShow">这是要显示的数据</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false
    }
  }
}
</script>

與 v-if/v-else 不同，v-show 是透過控制 CSS display 屬性來顯示和隱藏資料。當 isShow 的值為 true 時，要顯示的資料會顯示出來，display 屬性為此元素所設定的值，例如預設為 block；反之則會隱藏，display 屬性為 none。

v-if/v-else 和v-show 的使用場景不同，v-if/v-else 適合在需要頻繁切換的情況下使用，因為它只有在滿足條件的情況下才會渲染對應的內容，然後在不滿足條件時銷毀並重新渲染；而v-show 適合在初始渲染時就需要根據條件來控制顯示或隱藏資料的情況下使用，因為它只是單純的控制CSS display 屬性。

3. computed 計算屬性

<template>
  <div>
    <div>{{ message }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      content: '这是要显示的数据'
    }
  },
  computed: {
    message() {
      if(this.isShow) {
        return this.content
      } else {
        return ''
      }
    }
  }
}
</script>

computed 計算屬性可以在模板中動態地計算一些值，並將計算結果傳回給模板來渲染。在上面的範例中，我們利用了 computed 計算屬性中的 message 方法來根據 isShow 值的變化來動態改變要顯示的資料。

4. methods 方法

<template>
  <div>
    <div>{{ getMessage() }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      content: '这是要显示的数据'
    }
  },
  methods: {
    getMessage() {
      if(this.isShow) {
        return this.content
      } else {
        return ''
      }
    }
  }
}
</script>

methods 方法可以在模板中動態地呼叫某個方法，並將方法的回傳值回傳給模板來渲染。在上面的例子中，我們利用了 methods 方法中的 getMessage 方法來根據 isShow 值的變化來動態改變要顯示的資料。

無論採用哪種方式，關鍵是根據具體的場景來選擇合適的方式來隱藏或顯示資料。

以上是vue隱藏資料怎麼顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章！