页面效果：单击图片时图片隐藏显示背景，再次点击重新显示图片。
实现流程：
第一步：创建web项目，导入vue.js
第二步：实例化vue对象，在页面中引入<script>标签，并在<script>标签中实例化vue对象。通过el将对象需要挂载的值进行绑定。
第三步：创建组件，给图片添加v-show的值，控制图片是否显示，利用css样式设置图片背景，点击图片时，隐藏img显示盒子背景图。通过@click控制show和v-show属性，将@click给盛放的盒子，用盒子进行占位来实现再次点击图片重新显示效果。
Css部分的样式：
优化代码：创建一个·数组，添加v-for属性，用for循环遍历数组中的元素，通过v-bind变量im动态绑定img，接收遍历v-for循环遍历数组中的每一个元素，通过props声明使用父组件的数据。
完整代码展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js"></script>
<style>
#app{
width: 1300px;
height: 1300px;
justify-content: space-around;
display: flex;
flex-wrap: wrap;
}
.item{
width: 128px;
height: 128px;
background-color: pink;
}
</style>
<noscript></noscript>
</head>
<body>
<div id="app">
<!-- 动态绑定im=img -->
<long v-for = "img in arrayimg" v-bind:im="img"></long>
</div>
</body>
<template id="around">
<div class="item" @click="change">
<img :src="im" v-show="show" />
<!-- 解析字符串 -->
</div>
</template>
<script type="text/javascript">
Vue.component("long",{
template:"#around",
// 连接组件
props:["im"],
// 声明要使用父组件的数据
data:function(){
return{
// 让每个组件的内容互不影响
show:true,
}
},
methods:{
change:function(){
this.show = !this.show
// 取反
}
}
});
var vm = new Vue({
el:"#app",
// /作用范围
data:{
arrayimg:["img/a (1).png","img/a (2).png", "img/a (3).png", "img/a (4).png", "img/a (5).png", "img/a (6).png", "img/a (7).png", "img/a (8).png", "img/a (9).png", "img/a (10).png", "img/a (11).png", "img/a (12).png", "img/a (13).png", "img/a (14).png", "img/a (15).png", "img/a (16).png", "img/a (17).png", "img/a (18).png", "img/a (19).png", "img/a (20).png", "img/a (21).png", "img/a (22).png", "img/a (23).png", "img/a (24).png", "img/a (25).png", "img/a (26).png", "img/a (27).png", "img/a (28).png", "img/a (29).png", "img/a (30).png", "img/a (31).png", "img/a (32).png", "img/a (33).png", "img/a (34).png", "img/a (35).png", "img/a (36).png", "img/a (37).png", "img/a (38).png", "img/a (39).png", "img/a (40).png", "img/a (41).png", "img/a (42).png", "img/a (43).png", "img/a (44).png", "img/a (45).png", "img/a (46).png", "img/a (47).png", "img/a (48).png", "img/a (49).png", "img/a (50).png", "img/a (51).png", "img/a (52).png", "img/a (53).png", "img/a (54).png", "img/a (55).png", "img/a (56).png", "img/a (57).png", "img/a (58).png", "img/a (59).png", "img/a (60).png", "img/a (61).png", "img/a (62).png", "img/a (63).png", "img/a (64).png", "img/a (65).png", "img/a (66).png", "img/a (67).png", "img/a (68).png", "img/a (69).png", "img/a (70).png", "img/a (71).png", "img/a (72).png", "img/a (73).png", "img/a (74).png", "img/a (75).png", "img/a (76).png", "img/a (77).png", "img/a (78).png", "img/a (79).png", "img/a (80).png", "img/a (81).png", "img/a (82).png", "img/a (83).png", "img/a (84).png", "img/a (85).png", "img/a (86).png", "img/a (87).png", "img/a (88).png", "img/a (89).png", "img/a (90).png", "img/a (91).png", "img/a (92).png", "img/a (93).png", "img/a (94).png", "img/a (95).png", "img/a (96).png", "img/a (97).png", "img/a (98).png", "img/a (99).png", "img/a (100).png"
]
}
});
</script>
</html>
附件链接：https://pan.baidu.com/s/1FkIyFAHD2QnVqd85Y5atGg?pwd=zyh3
提取码：zyh3
--来自百度网盘超级会员V2的分享
标签：vue,img,show,组件,隐藏,png,图片 From： https://www.cnblogs.com/zqh332/p/17234606.html