showImage() { document.getElementById("img2ID").classList.remove("hidden") }改成vue形式
时间: 2024-05-15 22:14:28 浏览: 6
如果您想把这段代码转换成 Vue.js 的形式,可以这样写:
首先,您需要在 Vue 组件中定义一个 data 属性,来控制图片的显示与隐藏:
```
<template>
<div>
<button @click="showImage">显示图片</button>
<img :class="{ hidden: isImageHidden }" id="img2ID" src="your_image_url" />
</div>
</template>
<script>
export default {
data() {
return {
isImageHidden: true
}
},
methods: {
showImage() {
this.isImageHidden = false
}
}
}
</script>
<style>
.hidden {
display: none;
}
</style>
```
在上面的代码中,我们使用了一个按钮来触发 showImage 方法,该方法会将 isImageHidden 属性设置为 false,从而显示图片。同时,我们使用了 Vue 的数据绑定语法,将 isImageHidden 绑定到了图片的 class 属性上。当 isImageHidden 为 true 时,图片会隐藏;当 isImageHidden 为 false 时,图片会显示。
同时,我们还定义了一个 hidden 类,用来控制图片的隐藏。在样式中,我们设置了 hidden 类的 display 属性为 none,这样就可以实现图片的隐藏效果。