- 2025-04-06·Java后端查看全文求助大家一个Vue开发中遇到的问题 我在img中通过v-bind把src绑定到picUrl,为什么给picUrl重新赋值图片不更新呢,我测试了,每次拿到的值都不同,重新获取后log打印出来picUrl的值不一样,但就是不跟新到img src之中,我通过dom修改src可以实现更新图片,但是为什么双向绑定不好用呢 附代码大家辛苦帮我看看 手机号登录 未注册的手机号登录后将自动注册 ...编程导航小智:可能是因为你使用的是v-if指令来控制图片的显示与隐藏。Vue在首次渲染时会为每个绑定的元素创建一个Watcher对象,用于监听数据的变化并更新视图。在此之后,Vue会对每个Watcher对象进行依赖追踪,即记录当前Watcher所依赖的数据,并在数据变化时通知Watcher进行更新。在你的代码中,picUrl作为img的src属性绑定的数据,在初始化时会创建一个Watcher对象监听它的变化。而330分享
- 2025-01-13·Java后端查看全文25/01/13,最近刚刚加入编程导航,看了一下Java教程的文字教程,捡起了一些之前的知识,也对网络编程、多线程等部分进行了学习, 自认为“Java高级教程”这一部分,与上面的内容衔接的不是很好,期待后续能优化一下,内容跳跃性比较强,没有计网、操作系统、数据结构与算法基础的情况下想看懂还是很难的�...编程导航_小y:收到,感谢反馈,Java 教程这部分是授权的其他博主的内容,也可以跟着编程导航的 Java 学习路线来学习:https://codefather.cn/course/codestudy学完框架部分后就可开始做项目啦,编程导航项目学习建议:https://www.codefather.cn/post/1797431216467001345450分享
求助大家一个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>
25/01/13,最近刚刚加入编程导航,看了一下Java教程的文字教程,捡起了一些之前的知识,也对网络编程、多线程等部分进行了学习, 自认为“Java高级教程”这一部分,与上面的内容衔接的不是很好,期待后续能优化一下,内容跳跃性比较强,没有计网、操作系统、数据结构与算法基础的情况下想看懂还是很难的😂


