<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<!-- <img v-bind:src="imgUrl" alt="" /> -->
<!-- 也可以简写 -->
<!-- v-show 和 v-if 都行 -->
<img v-show="isShow" :src="imgUrl" alt="" />
<img v-if="isShow" :src="imgUrl" alt="" />
<button @click="isShow = !isShow">切换显示</button>
</div>
<script src="./vue.min.js"></script>
<script>
//vm: vue实例
var vm = new Vue({
//配置
el: "#app", //css选择器
data: {
isShow: true,
//和界面相关的数据
imgUrl:
"http://pic.netbian.com/uploads/allimg/210203/232830-161236611012e2.jpg",
},
});
</script>
</body>
</html>
Vue图片显示隐藏小demo
最新推荐文章于 2024-06-27 15:26:29 发布
这个博客演示了一个简单的 Vue.js 应用,通过 `v-if` 和 `v-show` 指令来切换图片的显示状态。点击按钮可以改变 `isShow` 数据属性,从而控制图片的隐藏与显示。示例中使用了 Vue 的基本模板语法和事件绑定。
摘要由CSDN通过智能技术生成