vue动态绑定img的src值

最新推荐文章于 2025-06-27 15:43:04 发布

原创最新推荐文章于 2025-06-27 15:43:04 发布 · 4k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue动态绑定img的src赋值

收录于

个人小结专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何在Vue中根据页面数据动态加载和显示图片，包括在data中定义图片路径，使用v-show控制图片显示，并根据不同的数据条件切换图片源。

  <img :src="src" alt="" v-show="countRatio!=null">

在data里面分别定义，根据页面数据展示的条件赋值src，引入图片的时候，在data里定义

 up: require('../../../assets/images/uppunish.png'),

在函数里赋值就可以了

    if (res.countRatio!=null) {
                    if (res.countRatio > 0) {
                        this.src = this.up;
                        this.countRatio = Math.round(res.countRatio * 100);
                    } else if (res.countRatio < 0) {
                        this.src = this.down;
                        this.countRatio = Math.round(res.countRatio * 100).toString().replace('-', '');
                    }
                } else {
                    this.countRatio = null;
                }

data定义数据部分
在这里插入图片描述