javascript - vue Comment s'assurer que lorsque vous cliquez sur une entrée, seule l'icône en dessous sera affichée au lieu de toutes.

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 apparaît après avoir cliqué sur Entrée

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

i apparaît après la modification des données d'entrée

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

Answer 4

1.@focus="focus" Le recto est pour obtenir le focus, et le verso est les événements à traiter après avoir écrit le focus par vous-même. Vous pouvez donner différents noms et déclencher différents événements, et le problème que vous avez mentionné le sera. ne se produit pas.
Votre code est le même événement

2. Si vous souhaitez afficher ou masquer un élément, vous pouvez utiliser v-show / v-if

1. Puisque vous utilisez vue, il est préférable de ne pas utiliser la méthode native