账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue 根据ajax 返回的key value值动态改变img的src
    32
    0

    问题描述

    我想根据后台返回来的json其中的一个数据,来动态改变img src的路径从而显示不同的图片

    比如后台返回的是[{"ALARMNAME":"大风黄色预警"}] 那我就显示大风黄色预警的图片
    [{"ALARMNAME":"暴雪黄色预警"}]那我就显示暴雪预警的图片

    问题出现的环境背景及自己尝试过哪些方法

    尝试了很多没成功

    相关代码

    // 请把代码文本粘贴到下方(请勿用图片代替代码)

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>天气查询</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="stylesheet" href="../css/mui.min.css">
        <!-- 日期选择器 -->
        <link rel="stylesheet" href="../css/mui.picker.min.css">
        <style type="text/css">
        </style>
    </head>
    <body>
        <!-- 页面主体 -->
        <div id="weather" class="mui-content">
            <!-- 预警信号 -->
            <div  class="mui-control-content mui-active">
                <ul v-for="w in weatherwaring">
                    <li>
                        <a>
                            <img src="../img/icon/weatherIcon/df-y.png">//想改变的路径
                            <div>
                                {{w.ALARMNAME}}//这里就是现实出来的信息想根据这个信息改变src路径
                                <p>{{w.PUBLISHTIME}}</p>
                            </div>
                        </a>
                        <ul>
                            <li>
                                <span>详情信息:
                                    <p>{{w.CONTENT}}</p>
                                </span>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>    
    </body>
    <script src="../js/mui.min.js"></script>
    <script src="../js/vue.2.5.17.js"></script>
    <script src="../js/mui.picker.min.js"></script>
    <!-- <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> -->
    <script type="text/javascript">
        mui.init({
            //启用右滑关闭功能
            swipeBack: true,
        });
    
        new Vue({
            el: '#weather',
            data: {
                weatherwaring: null,
            },
            methods: {
                // 天气预警
                Get_YJweather: function() {
                    var _this = this;
                    mui.ajax('https://segmentfault.com/ask', {
                        data: {
                            timefrom: 'xxx',
                            timeto: 'xxx'
                        },
                        dataType: 'json', //服务器返回json格式数据
                        type: 'post', //HTTP请求类型
                        timeout: 50000, //超时时间设置为10秒;
                        success: function(res) {
                            _this.weatherwaring = JSON.parse(res);
                            console.log('请求成功' + res);
                        },
                        error: function(xhr, type, errorThrown) {
                            console.log('请求失败');
                        }
                    });
                }
            }
        });
    </script>
    </html>
    

    你期待的结果是什么?实际看到的错误信息又是什么?

    最好能少改动一些代码是实现谢谢各位大神了

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    更多回答
    扫一扫访问手机版

    回答动态

    师傅被妖怪抓走了:发布了悬赏问题火爆全网的“元宇宙”到底是什么?预计能赚取 1积分收益
    酒后略带风情:发布了悬赏问题Android内存中Graphics与Code占用过高预计能赚取 10积分收益
    扛起拖把扫天下:发布了悬赏问题typescript如何导出接口配置?求解,谢谢!预计能赚取 10积分收益
    发布了悬赏问题Vue 如何改变返回页面的路径?如让B页面只能返回到A页面.预计能赚取 11积分收益
    发布了悬赏问题vue H5移动端;底部bottom固定定位,安卓弹起键盘导致页面变形如何解决?预计能赚取 10积分收益
    发布了悬赏问题请问为什么tomcat8.5 GET请求中文正常,POST请求还需要设置UTF-8.预计能赚取 10积分收益
    发布了悬赏问题vue2.5+ts创建以及引入jq的方法预计能赚取 11积分收益
    情场浪女:发布了悬赏问题import ggplot时报错module 'pandas' has no attribute 'tslib'预计能赚取 10积分收益
    见心书画许老师18753375161:发布了悬赏问题echarts3 legend禁止点击事件,允许悬浮事件预计能赚取 11积分收益
    aa_92cb0bd09f:发布了悬赏问题codewar上的一个问题预计能赚取 11积分收益