Vue2：用Vue框架实现 - 点击切换图片

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>
 
</head>
<!-- 1.实现点击图片切换另一张图片-->

<body>

    <style>
        img {
            width: 200px;
            height: 200px;
        }
    </style>
    <!-- 点击切换图片 -->
    <div id="box">
        <img :src="img1" :style="{display:d1,flag}" alt="">
        <img :src="img2" :style="{display:d2,flag}" alt="">
        <button @click="btn()">{{tip}}</button>
    </div>
    <script type="text/javascript">
        new Vue({
            el: "#box",
            data: {
                tip: "点击切换图片",
                img1: "./flower.png",
                img2: "./flower2.png",
                d1: "block",
                d2: "none",
                flag: true,
            },
            methods: {
                btn() {
                    this.flag = !this.flag
                    if (!this.flag) {
                        this.d1 = "none";
                        this.d2 = "block";
                    }else{
                        this.d1 = "block";
                        this.d2 = "none";
                    }
                }
            },
        })

    </script>


</body>

</html>
posted on 2022-08-31 22:41 香香鲲阅读(1055) 评论(0) 收藏举报