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