vue实验2.1---用v-if和v-show点击按钮实现图片的隐藏和显示

    v-if和v-show的区别是，v-if是当条件符合的时候才进行渲染，v-show是不管条件符合不符合都先进行渲染，条件符合的时候进行显示。所以当只进行一次渲染的时候使用v-if，多次重复地进行渲染需要用v-show。这样性能比较高。

第一步：导入图片

直接复制粘贴在assets目录下

第二步：在img上绑定v-if和v-show属性

<template> 
  <div class="center">
    <button @click="flag=!flag">显示/隐藏</button>
    <!--使用v-if-->
    <img v-if="flag" src="../assets/pic4.jpg">
    <!--使用v-show-->
    <img v-show="flag" src="../assets/pic4.jpg">
  </div>
</template>

<script setup>
import {ref} from 'vue'
const flag=ref(true)

</script>

最终实现效果

点击之后