javascript - Gunakan vue.js untuk mencapai kesan: klik li, dapatkan nilai html klik semasa li, dan parameter ini menjadi objek tetingkap?
曾经蜡笔没有小新
曾经蜡笔没有小新 2017-06-14 10:54:14
0
4
989

Kesan yang ingin dicapai:

  • Klik pada li untuk mendapatkan nilai html li yang sedang diklik;

Kod utama

<body>
<p id="page">
    <ul>
        <li v-on:click="aa(this)" v-for="item in items">{{item}}</li>
    </ul>
</p>
<script type="text/javascript">
new Vue({
  el: '#page',
  data: {
        items:[11,22,33,44]
  },
  methods:{
    aa:function(obj){
        console.log(obj);  //打印出来的是 window对象?
        alert(obj.html());   //找不到点击的值;
    }
  }
})
</script>
</body>

Penerangan masalah:

Ini yang diluluskan selepas mengklik li dicetak sebagai objek tetingkap, bukan objek li, jadi objek itu tidak dapat ditemui bagaimana untuk menghantar objek li semasa ke js?

曾经蜡笔没有小新
曾经蜡笔没有小新

membalas semua(4)
小葫芦

Baca dokumentasi dengan teliti...jangan membuat andaian tentang penggunaan yang tidak dapat dijelaskan ini.

Apabila acara sebaris perlu mengakses objek acara asal, cuma tambahkan $event parameter padanya. Seperti ini:

<li v-on:click="aa($event)" v-for="item in items">{{item}}</li>

Anda perlu mendapatkan arusli标签的对象,读取事件对象下的currentTarget属性就行了,即event.currentTarget.

女神的闺蜜爱上我
<li @click="aa(item)" v-for="item in items">{{item}}</li>
aa(item) {
  console.log(item) // 当前li的内容
}
左手右手慢动作

Tambahkan atribut ref pada li dan kemudian dapatkan nod dom melalui ini.$refs dalam kaedah

typecho

Ujian mungkin:

<li @click="aa($event)" v-for="item in items">{{item}}</li>
  methods:{
    aa:function(event){
        console.log(event.target.innerHTML);
    }
  }
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan