Vue v-for循環(huán)之@click點(diǎn)擊事件獲取元素示例
更新時(shí)間：2019年11月09日 11:00:17 作者：我相信慢思考的力量
今天小編就為大家分享一篇Vue v-for循環(huán)之@click點(diǎn)擊事件獲取元素示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
應(yīng)用背景
瀏覽論壇的貼子（數(shù)據(jù)庫(kù)的數(shù)據(jù)通過(guò)vue遍歷在html頁(yè)面上）
點(diǎn)擊帖子的標(biāo)題、圖片，可以查看詳細(xì)的帖子（點(diǎn)擊事件獲取id）
1、設(shè)置一個(gè)隱藏值的放置Id的div，點(diǎn)擊div就獲取id，傳參到后臺(tái)（點(diǎn)擊一部分）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<table>
<tr v-for="site in sites">
<td @click="link($event)">{{ site.id }}</td><td>{{ site.name }}</td><td>{{ site.num }}</td><td>{{ site.sex }}</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#app',
data: {
sites: [
{id:01, name: '小米' ,num: '中國(guó)',sex: '女'},
{id:02, name: '齋藤' ,num: '日本',sex: '男'},
{id:03, name: '帕廣' ,num: '緬甸',sex: '人妖'}
]
},
methods: {
link(e){
alert(e.currentTarget.innerHTML );
}
},
})
</script>
</body>
</html>
2、在圖片上添加點(diǎn)擊事件，把id傳進(jìn)去
<tr v-for="site in sites" @click="link(site.num)">
<td>{{ site.name }}</td><td>{{ site.num }}</td><td>{{ site.sex }}</td>
</tr>
@click一般都是獲取這個(gè)點(diǎn)擊的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<table>
<tr v-for="site in sites" @click="link(site.num)">
<td>{{ site.name }}</td><td>{{ site.num }}</td><td>{{ site.sex }}</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#app',
data: {
sites: [
{ name: '1' ,num: '中國(guó)',sex: '女'},
{ name: '2' ,num: '日本',sex: '男'},
{ name: '3' ,num: '緬甸',sex: '人妖'}
]
},
methods: {
link(db){
alert(db);
}
},
})
</script>
</body>
</html>
使用場(chǎng)景不同，優(yōu)勢(shì)不同
以上這篇Vue v-for循環(huán)之@click點(diǎn)擊事件獲取元素示例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決VUEX的mapState/...mapState等取值問(wèn)題
這篇文章主要介紹了解決VUEX的mapState/...mapState等取值問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)牌面翻轉(zhuǎn)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
使用VUE和webrtc-streamer實(shí)現(xiàn)實(shí)時(shí)視頻播放(監(jiān)控設(shè)備-rtsp)
WebRTC-streamer是一項(xiàng)使用簡(jiǎn)單機(jī)制通過(guò)WebRTC流式傳輸視頻捕獲設(shè)備和RTSP源的實(shí)驗(yàn),下面這篇文章主要給大家介紹了關(guān)于如何使用VUE和webrtc-streamer實(shí)現(xiàn)實(shí)時(shí)視頻播放(監(jiān)控設(shè)備-rtsp)的相關(guān)資料,需要的朋友可以參考下2022-11-11
vue實(shí)現(xiàn)移動(dòng)端圖片上傳功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端圖片上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
vue多語(yǔ)言轉(zhuǎn)換的幾種方法總結(jié)
這篇文章主要介紹了vue多語(yǔ)言轉(zhuǎn)換的幾種方法總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
Vue會(huì)盡可能高效地渲染元素,通常會(huì)復(fù)用已有元素而不是從頭開(kāi)始渲染。這么做會(huì)使Vue變得非?？?下面這篇文章主要給大家介紹了Vue基礎(chǔ)教程之條件渲染和列表渲染的相關(guān)資料,需要的朋友可以參考下2021-11-11
這篇文章主要介紹了vue.js 上傳圖片實(shí)例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
vue異步請(qǐng)求數(shù)據(jù)重新渲染方式
這篇文章主要介紹了vue異步請(qǐng)求數(shù)據(jù)重新渲染方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
這篇文章主要給大家介紹了關(guān)于如何一步步基于element-ui封裝查詢(xún)組件的相關(guān)資料,本文通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue.js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-10-10
Vue+Element-UI中el-table動(dòng)態(tài)合并單元格:span-method方法代碼詳解
el-table是element-ui提供的表格組件,可以用于展示和操作數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于Vue+Element-UI中el-table動(dòng)態(tài)合并單元格:span-method方法的相關(guān)資料,需要的朋友可以參考下2023-09-09