使用vue实现小灯泡的开关效果

最新推荐文章于 2024-04-17 14:05:55 发布

weixin_45614783

最新推荐文章于 2024-04-17 14:05:55 发布

阅读量976

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45614783/article/details/126988787

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="script/vue.js"></script>
    <script language="JavaScript">
        
        window.οnlοad=function(){
            var vue = new Vue({
                "el": "#div0",
                data: {
                    num : 0
                },
                methods: {
                    open: function () {
                        this.num = 1;
                    },
                    close: function () {
                        this.num = 0;
                    }
                }
        });
        }
    </script>
</head>
<body>
    <div id="div0">
        <img v-if="num==0" src="imgs/灯灭.png" alt="灯灭">
        <img v-else="num==1" src="imgs/灯亮.png" alt="灯亮">
        <input type="button" value="开" v-on:click="open">
        <input type="button" value="关" v-on:click="close">

    </div>
</body>
</html>