求助大家一个Vue开发中遇到的问题 我在img中通过v-bind把src绑定到picUrl，为什么给picUrl重新赋值图片不更新呢，我测试了，每次拿到的值都不同，重新获取后log打印出来picUrl的值不一样，但就是不跟新到img src之中，我通过dom修改src可以实现更新图片，但是为什么双向绑定不好用呢 附代码大家辛苦帮我看看 <template> <div class="login"> <van-nav-bar title="会员登录" left-arrow @click-left="$router.go(-1)" /> <div class="container"> <div class="title"> <h3>手机号登录</h3> <p>未注册的手机号登录后将自动注册</p> </div> <div class="form"> <div class="form-item"> <input v-model="mobile" class="inp" maxlength="11" placeholder="请输入手机号码" type="text"> </div> <div class="form-item"> <input v-model="picCode" class="inp" maxlength="5" placeholder="请输入图形验证码" type="text"> <img ref="img" v-if="picUrl" :key="picUrl + Date.now()" :src="picUrl" @click="getPicCode" alt=""> </div> <div class="form-item"> <input v-model="msgCode" class="inp" placeholder="请输入短信验证码" type="text"> <button @click="getCode"> {{ second === totalSecond ? '获取验证码' : second + '秒后重新发送'}} </button> </div> </div> <div @click="login" class="login-btn">登录</div> </div> </div> </template> <script> // import { codeLogin, getMsgCode, getPicCode } from '@/api/login' // import { Toast } from 'vant' import request from '@/utils/request' export default { name: 'LoginPage', data () { return { picKey: '', // 将来请求传递的图形验证码唯一标识 picUrl: '', // 存储请求渲染的图片地址 totalSecond: 60, // 总秒数 second: 60, // 当前秒数，开定时器对 second-- timer: null, // 定时器 id mobile: '', // 手机号 picCode: '', // 用户输入的图形验证码 msgCode: '' // 短信验证码 } }, async created () { this.getPicCode() }, methods: { // 获取图形验证码 async getPicCode () { const { data: { base64, key } } = await request.get('/captcha/image') this.picUrl = base64 // 存储地址 this.picKey = key // 存储唯一标识 // this.$refs.img.src = base64 console.log('Base64', this.picUrl) console.log(this.picUrl === base64 ? '赋值成功' : '赋值失败') // Toast('获取图形验证码成功') // this.$toast('获取成功') // this.$toast.success('成功文案') } } } </script> <style lang="less" scoped> .container { padding: 49px 29px; .title { margin-bottom: 20px; h3 { font-size: 26px; font-weight: normal; } p { line-height: 40px; font-size: 14px; color: #b8b8b8; } } .form-item { border-bottom: 1px solid #f3f1f2; padding: 8px; margin-bottom: 14px; display: flex; align-items: center; .inp { display: block; border: none; outline: none; height: 32px; font-size: 14px; flex: 1; } img { width: 94px; height: 31px; } button { height: 31px; border: none; font-size: 13px; color: #cea26a; background-color: transparent; padding-right: 9px; } } .login-btn { width: 100%; height: 42px; margin-top: 39px; background: linear-gradient(90deg,#ecb53c,#ff9211); color: #fff; border-radius: 39px; box-shadow: 0 10px 20px 0 rgba(0,0,0,.1); letter-spacing: 2px; display: flex; justify-content: center; align-items: center; } } </style>