欢迎您 本站地址:
复制网址
手机查看
切换背景
返回首页
返回编程教学
易经
职场故事
拼多多副业
音效
各国货币代码
书籍
新五代史
辽史
源代码：
html编辑器
颜色值转换
点击运行
Vue 测试实例 - 小库网 <script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script> <style> #app { border: dashed black 1px; display: inline-block; padding-bottom: 10px; } #app > button { display: block; margin: auto; } #lightDiv { position: relative; width: 150px; height: 150px; } #lightDiv > img { position: relative; width: 100%; height: 100%; } #lightDiv > div { position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; border-radius: 50%; background-color: yellow; } </style> <div id="app"> <div id="lightDiv"> <div v-show="lightOn"></div> <img src="https://static.jyshare.com/libs/images/svg/img_lightBulb.svg"> </div> <button v-on:click=" lightOn =! lightOn ">开/关</button> </div> <script> const app = Vue.createApp({ data() { return { lightOn: false } } }) app.mount('#app') </script>
运行结果：
小库提示
扫描下方二维码，访问手机版。
打赏
关闭