Vue中有一個(gè)很便捷的指令,可以讓我們實(shí)現(xiàn)點(diǎn)擊下層元素的操作,那就是v-on指令中的click事件。通過(guò)click事件,我們可以給定一個(gè)方法,在點(diǎn)擊元素時(shí)觸發(fā)該方法,從而實(shí)現(xiàn)點(diǎn)擊下層的效果。
下面是一個(gè)示例:
// HTML部分 <ul> <li v-for="item in items" v-on:click="handleClick(item.id)"> {{ item.content }} </li> </ul> // JS部分 data() { return { items: [ { id: 1, content: "item 1" }, { id: 2, content: "item 2" }, { id: 3, content: "item 3" } ] } }, methods: { handleClick(id) { console.log("點(diǎn)擊了id為" + id + "的元素"); } }
這段代碼實(shí)現(xiàn)了一個(gè)ul列表的渲染,同時(shí)給每個(gè)li元素綁定了一個(gè)click事件,當(dāng)點(diǎn)擊元素時(shí)觸發(fā)handleClick方法,該方法接收一個(gè)id參數(shù),打印該元素的id。
通過(guò)這段代碼,我們可以在控制臺(tái)中看到點(diǎn)擊元素后輸出的信息,實(shí)現(xiàn)了點(diǎn)擊下層元素的功能。