點燈坊

失くすものさえない今が強くなるチャンスよ

使用 v-else Toggle 兩個 HTML Element

Sam Xiao's Avatar 2024-01-30

v-if 常搭配 v-else 根據 State 的 true 與 false Toggle 兩個 HTML Element。

Version

Vue 3.4

Composition API

<template>
  <ul>
    <li v-for="(item, i) in companies" :key="i">
      <span v-if="!item.isEdit">
        {{ item.name }}
      </span>
      <span v-else>
        <input type="text" v-model="item.name" />
      </span>
      <span v-if="!item.isEdit">
        <button @click="item.isEdit = true">edit</button>
      </span>
      <span v-else>
        <button @click="item.isEdit = false">save</button>
      </span>
    </li>
  </ul>
</template>

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

let companies = ref([
  { name: 'Apple', isEdit: false },
  { name: 'Google', isEdit: false },
  { name: 'Microsoft', isEdit: false }
])
</script>

Line 23

let companies = ref([
  { name: 'Apple', isEdit: false },
  { name: 'Google', isEdit: false },
  { name: 'Microsoft', isEdit: false }
])
  • companies state 以 Array 形式儲存，多了 isEdit 欄位配合 v-if 與 v-else toogle

實務上會透過 map() 自己加上 isEdit 欄位

Line 10

<span v-if="!item.isEdit">
  <button @click="item.isEdit = true">edit</button>
</span>
<span v-else>
  <button @click="item.isEdit = false">save</button>
</span>
  • v-if：若 isEdit 為 false 則顯示 edit button，且按下去將 isEdit toggle 成 true
  • v-else：否則顯示 save button，且按下去將 isEdit toggle 成 false

Line 4

<span v-if="!item.isEdit">
  {{ item.name }}
</span>
<span v-else>
  <input type="text" v-model="item.name" />
</span>
  • v-if：若 isEdit 為 false 則直接顯示
  • v-else：否則以 Textbox 顯示

Options API

<template>
  <ul>
    <li v-for="(item, i) in companies" :key="i">
      <span v-if="!item.isEdit">
        {{ item.name }}
      </span>
      <span v-else>
        <input type="text" v-model="item.name" />
      </span>
      <span v-if="!item.isEdit">
        <button @click="item.isEdit = true">edit</button>
      </span>
      <span v-else>
        <button @click="item.isEdit = false">save</button>
      </span>
    </li>
  </ul>
</template>

<script>
export default {
  data: () => ({
    companies: [
      { name: 'Apple', isEdit: false },
      { name: 'Google', isEdit: false },
      { name: 'Microsoft', isEdit: false }
    ]
  })
}
</script>
  • 最後附上相同功能的 Options API 供參考
  • State 宣告在 data() function
  • v-if 與 v-else 使用上不變

Conclusion

  • v-if 與 v-else 在實務上常一起搭配，由於 Vue 不鼓勵如 jQuery 去修改 HTML element，所以很多看似動態 toggle HTML ，事實上只是將 HTML 先準備好，靠 v-if 與 v-else 去 toggle 而已，如在 RWD 的 menu 在手機會變成 漢堡，就是使用 v-if 與 v-else 完成

Reference

Vue, v-else

# Vue