javascript - vue How to make sure that when you click on an input, only the icon below it will be displayed instead of all of them.

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

i, css appears after clicking input

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

i appears after the input data is changed

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

Answer 4

1.@focus="focus" The front is to get the focus, and the back is the events to be processed after getting the focus written by yourself. You can give different names and trigger different events, and the problem you mentioned will not occur.
Your code is the same event

2. If you want to show or hide an element, you can use v-show / v-if

1. Since you are using vue, it is best not to use the native method