提升用户体验之条件可见支持切换的图片优化

优化前的代码

<template>
  <p
    @click="helloFunc"
  >Hello</p>
  <div
    v-if="hello === 1"
    style="background-color: blue;"
  >
    <img src="https://placeholder.im/3000x2000.png/HELLO WORLD/cccccc/000000" />
  </div>
</template>

<script setup lang="ts" >
import { ref } from 'vue'

const hello = ref(1)

function helloFunc() {
  hello.value = hello.value === 1 ? 2 : 1
}

</script>

优化后的代码

<template>
  <p
    @click="helloFunc"
  >Hello</p>
  <div
    v-show="hello === 1"
    style="background-color: blue;"
  >
    <img src="https://placeholder.im/3000x2000.png/HELLO WORLD/cccccc/000000" />
  </div>
</template>

<script setup lang="ts" >
import { ref } from 'vue'

const hello = ref(1)

function helloFunc() {
  hello.value = hello.value === 1 ? 2 : 1
}

</script>