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