vue指令——@click结合:src绑定图片url

绝地灬酷狼 2023-10-01 09:32 34阅读 0赞

![在这里插入图片描述][a62ce864ba0e482581197f2d295b1fe0.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            
        </style>
    </head>
    <body>
        <div id="app" v-cloak>
            <div>
                <img :src="'images/'+url+'.jpg'" alt="">
            </div>
            <button @click="add">点击加1</button>
            <button @click="minus">点击减1</button>
        </div>
        <script src = "js/vue.js"></script>
        <script>
            var vue = new Vue({
          
                el: "#app",
                data: {
          
                    url: 0
                },
                methods:{
          
                    add(event) {
          
                        this.url ++
                        if(this.url >= 5) {
          
                            this.url = 0;
                        }
                    },
                    minus(){
          
                        if(this.url <= 0) {
          
                            this.url = 5;
                        }
                        this.url --
                    }
                }
            })
        </script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K6w_size_20_color_FFFFFF_t_70_g_se_x_16]

[a62ce864ba0e482581197f2d295b1fe0.png]: https://img-blog.csdnimg.cn/a62ce864ba0e482581197f2d295b1fe0.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K6w_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/c453b8648a464a7695183fcfec6f9933.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K6w,size_20,color_FFFFFF,t_70,g_se,x_16