使用 v-if 實現 Toggle 一個 HTML Element | 點燈坊

v-if 可根據 State 的 true 與 false 實現 Toggle HTML。

Version

Vue 3.4

Composition API

<template>
  <button @click="onClick">Toggle</button>
  <div v-if="isShowTitle">Hello World</div>
</template>

<script setup>
import { ref } from 'vue'

let isShowTitle = ref(true)

let onClick = () => (isShowTitle.value = !isShowTitle.value)
</script>

Line 2

<div v-if="isShowTitle">Hello World</div>

• v-if：Hello World 由 isShowTitle state 決定

Line 11

let onClick = () => (isShowTitle.value = !isShowTitle.value)

• 對 isShowTitle state 進行 toggle

Options API

<template>
  <button @click="onClick">Toggle</button>
  <div v-if="isShowTitle">Hello World</div>
</template>

<script>
export default {
  data: () => ({
    isShowTitle: true
  }),
  methods: {
    onClick() {
      this.isShowTitle = !this.isShowTitle
    }
  }
}
</script>

• 最後附上相同功能的 Options API 供參考
• State 宣告在 data() function
• v-if 使用上不變

Conclusion

• v-if 在實務上非常好用，由於 Vue 不鼓勵如 jQuery 去修改 HTML element，所以很多看似動態 HTML，事實上只是將 HTML 先準備好，靠 v-if 去 toggle 而已，如 對話框，載入中 … 都是使用 v-if 完成

Reference

Vue, v-if