问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

请教下vue的input获得焦点事件

头像
ttdms
    22284367

    目前我想做一个登录框，在登录框上有一个图片，如果username的input获得了焦点，就显示图1，如果password获得了焦点，就显示图2，请问应该怎么写才对？
    一开始我是这样写的：

    <img :src='imgurl'>

    在input上面写了@focus='test'
    然后再methods下面写了个test事件
    更改不了imgurl

    vue.js
    阅读 72.2k
    5 个回答
    得票最新
    头像
    陌路凡歌
      7.9k21119
      ✓ 已被采纳

      能改呀，不知道你怎么写的，是苹果浏览器的话貌似要把focus换成click，还是用click吧

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="box">
       <input type="text" @focus="aaa()" /> 
       <input type="password" @focus="bbb()"/>
       <img :src="url"/>
    </div>
   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>

           var vm = new  Vue({
            el:"#box",
            data:{
               url:"http://www.xuxin123.com/code/waterfall/images/33.jpg"
             },
             methods:{
                 aaa:function(){
                     this.url="http://www.xuxin123.com/code/waterfall/images/33.jpg";
                 },
                 bbb:function(){
                     this.url="http://www.xuxin123.com/code/waterfall/images/32.jpg";
                 }
             },
             mounted () {
              
            }
    
            
        });
    </script>
</body>
</html>
      头像
      王定坤
        1914

        是否在 focus 事件中 更改的时候 图片的src没有转换
        最好把你的代码贴上来一下

        头像
        梁天睿
          3251514

          获取焦点是@focus 失去焦点是@blur

          头像
          山佳
            53351934
            <img :src="show" alt="">
<input type="text" @focus="handleinput()">

methods:{
    handleinput(){
            this.show=""
        },
}
            头像
            西喜爱
              115
              新手上路，请多包涵
              <img :src="show" alt="">
<input type="text" @focus="handleinput()">

methods:{
    handleinput(){
            this.show=""
        },
}
              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题