vue 灯泡开关

最新推荐文章于 2023-04-14 17:19:15 发布

qq_295022030

最新推荐文章于 2023-04-14 17:19:15 发布

阅读量1.7k

点赞数 3

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_28473235/article/details/102600510

版权

本文通过一个简单的Vue实例展示了如何创建一个灯泡开关效果。利用Vue的数据绑定和条件渲染，通过点击按钮切换灯泡图片来模拟开关状态。在HTML中设置样式和内容，引入Vue.js库，然后在JavaScript中定义Vue实例，数据属性`imgShow`控制灯泡图片的显示，并提供`changeValue`方法来改变`imgShow`的状态。

摘要由CSDN通过智能技术生成

话不多说，直接上代码

样式：

<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