HTML
三个盒子，一个大盒子包含两个小盒子，v-show表示状态是否显示，v-on:click表示点击事件 。
<div id="a1">
<div id="a2" v-show="flag" v-on:click="switchs"></div>
<div id="a3" v-show="!flag" v-on:click="switchs"></div>
</div>
CSS
为了方便查看效果，将两个小盒子宽高设置一致并加上背景颜色（也可以直接设置成图片）。
* {
margin: 0;
padding: 0;
}
#a2 {
width: 200px;
height: 200px;
background-color: black;
}
#a3 {
width: 200px;
height: 200px;
background-color: red;
}
JS
v-show使用时，如果值为真，则显示内容，否则隐藏内容，所以可以设置点击时改变表达式的布尔值来实现图片切换效果。
var vm = new Vue({
el: '#a1',
data: {
flag: true,
},
methods: {
switchs: function () {
this.flag = !this.flag
},
},
})
注意
使用vue时，一定要记得在头部引入vue文件，否则不能实现效果。
完整代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<script src="vue.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#a2 {
width: 200px;
height: 200px;
background-color: black;
}
#a3 {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="a1">
<div id="a2" v-show="flag" v-on:click="switchs"></div>
<div id="a3" v-show="!flag" v-on:click="switchs"></div>
</div>
<script>
var vm = new Vue({
el: '#a1',
data: {
flag: true,
},
methods: {
switchs: function () {
this.flag = !this.flag
},
},
})
</script>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
