vue实现图片的显示隐藏

可以使用Vue的v-if或v-show指令来实现图片的显示和隐藏。

v-if指令会根据表达式的值来决定元素是否渲染，如果表达式为true，则渲染元素，否则不渲染。示例代码如下：

<template>
  <div>
    <button @click="showImage = !showImage">Toggle Image</button>
    <img v-if="showImage" src="image.jpg" alt="Image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      showImage: true
    }
  }
}
</script>

v-show指令也会根据表达式的值来决定元素是否显示，但是不同的是，即使元素不显示，它仍然会被渲染到页面中。示例代码如下：

<template>
  <div>
    <button @click="showImage = !showImage">Toggle Image</button>
    <img v-show="showImage" src="image.jpg" alt="Image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      showImage: true
    }
  }
}
</script>

需要注意的是，v-if会在条件变为false时销毁元素及其事件监听器和子组件。而v-show则只是简单地切换元素的CSS属性display。因此，如果需要频繁切换元素的显示和隐藏，建议使用v-show指令。