javascript - vue 怎样做到点击一个input就只有它下面的icon显示，而不是所有都显示-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - vue 怎样做到点击一个input就只有它下面的icon显示，而不是所有都显示

世界只因有你 2017-05-19 10:27:49

[JavaScript讨论组]

658

<p class="line">
  <p>{{ lists.nick }}</p>
  <p class="light_color">
    <input @focus="focus" @blur="blur" v-model="nick"><!--paremeter.nick--><!---->
    <i @click="clear" class="iconfont icon-iconziti56"></i>
  </p>
</p>
<p class="line">
  <p>{{ lists.valid_mobile }}</p>
  <p class="light_color" v-if="paremeter.valided_mobile == 0">
    <input @focus="focus" @blur="blur" v-model="paremeter.valid_mobile">
    <i @click="clear" class="iconfont icon-iconziti56"></i>
  </p>
  <p v-else class="light_color">
    {{ paremeter.valid_mobile }}
  </p>
</p>

世界只因有你

全部回复(4)

天蓬老师2017-05-19 10:29:49 4楼

    <p id="app">
      <input type="text" v-model='nick'>
      <span v-show='show'>DEMO</span>
    </p>
    <script>
    new Vue({
      el:'#app',
      data:{
        nick:''
      },
      computed:{
        show(){
          if(this.nick.length > 5) return true;
          else return false;
        }
      }
    })
    </script>

赞 +0

添加回复

迷茫2017-05-19 10:29:49 3楼

  <input type="text" v-model='nick'>
  <span v-show='show'>DEMO</span>
  <input type="text" v-model='name'>
  <span v-show='show'>DEMO</span>
  <input type="text" v-model='address'>
  <span v-show='show'>DEMO</span>
</p>
<script>
new Vue({
  el:'#app',
  data:{
    nick:''
  },
  computed:{
    show(){
      if(this.nick.length > 5) return true;
      else return false;
    }
  }
})
</script>
如果是这样的循环出来的我要怎么样改变一个input里的值只让它下面的span消失，不是所有都消失，都绑定show（）的话肯定不行，还要多写几个方法么

赞 +0

添加回复

習慣沉默2017-05-19 10:29:49 2楼

点击input后出现i, css

input:focus + i { 
     display: inline-block;
}
input:blur + i {
     display: none;
}

input数据改变后出现i

watch： {
    value_1 () {
        this.show_1 = true
    },
    value_2 () {
        this.show_2 = true
    }
}

赞 +0

添加回复

漂亮男人2017-05-19 10:29:49 1楼

1.@focus="focus" 前面是获取焦点后面是自己写的获取焦点后要处理的事件，你可以起不同名字，触发不同事件，就不会出现你说的问题了。
你的代码是同一个事件

2.如果让某元素显示隐藏可以用v-show / v-if

既然用vue 最好不要用原生的方法

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>