话不多说,直接上代码
样式:
<style>
.content{
height: 500px;
width: 800px;
overflow: hidden;
text-align: center;
}
.content img{
margin: 0 auto;
}
</style>
内容:
<div id="app">
<div class="content">
<img v-if="!imgShow" src="images/1.png" class="imgOne"/>
<img v-else src="images/2.png" class="imgTwo"/>
</div>
<button @click="changeValue">灯泡开关</button>
</div>
引入vue:
<!-- 引入vue.min.js 和axios.min.js 接口插件 -->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
js:
<script>
new Vue({
el: '#app',
data() {
return {
imgShow:false,
};
},mounted() {
},
methods: {
changeValue: function() {
this.imgShow =! this.imgShow
},
// showFuc:()=>{
// this.imgShow =! this.imgShow
// }
}
})
</script>
图片素材
好了,简单的开关就做好了。
喜欢的朋友,帮忙点个赞。新手入门,请多关照~