javascript - vue So stellen Sie sicher, dass beim Klicken auf eine Eingabe nur das darunter liegende Symbol und nicht alle angezeigt werden.

Question

<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>

Answer 1

    <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>

Answer 2

<p id="app">

  <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（）的话肯定不行，还要多写几个方法么

Answer 3

点击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
    }
}

Answer 4

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

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

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