(vue.js)请教下vue的input获得焦点事件_Web开发_编程问答

(vue.js)请教下vue的input获得焦点事件

来源:互联网  时间:2017/12/2 0:53:18

关于网友提出的“ (vue.js)请教下vue的input获得焦点事件”问题疑问,本网通过在网上对“ (vue.js)请教下vue的input获得焦点事件”有关的相关答案进行了整理,供用户进行参考,详细问题解答如下:

问题: (vue.js)请教下vue的input获得焦点事件
描述:

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

<img :src='imgurl'>

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


解决方案1:

<img :src="show" alt=" (vue.js)请教下vue的input获得焦点事件">
<input type="text" @focus="handleinput()">

methods:{
    handleinput(){
            this.show=""
        },
}

解决方案2:

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

解决方案3:

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" c c @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>

解决方案4:

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

上一篇(vue.js)如何控制vue不渲染data中的初始值?
下一篇(vue.js)nuxt引入element-ui失败
明星图片
相关文章
《 (vue.js)请教下vue的input获得焦点事件》由码蚁之家搜集整理于网络,
联系邮箱:mxgf168#qq.com(#改为@)