javascript - vue Bagaimana untuk memastikan bahawa apabila anda mengklik pada input, hanya ikon di bawahnya akan dipaparkan dan bukannya kesemuanya.

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 muncul selepas mengklik input

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

i muncul selepas data input ditukar

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

Answer 4

1.@focus="focus" Bahagian depan adalah untuk mendapatkan fokus, dan bahagian belakang adalah peristiwa yang akan diproses selepas mendapat fokus Anda boleh memberikan nama yang berbeza dan mencetuskan peristiwa yang berbeza, dan masalah yang anda nyatakan tidak akan berlaku .
Kod anda ialah acara yang sama

2 Jika anda ingin menunjukkan atau menyembunyikan elemen, anda boleh menggunakan v-show / v-if

.

1. Memandangkan anda menggunakan vue, sebaiknya jangan gunakan kaedah asli