vue 灯泡开关

话不多说，直接上代码

 样式：

 <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>

 

 图片素材

 好了，简单的开关就做好了。

喜欢的朋友，帮忙点个赞。新手入门，请多关照~