Vue v-for循環(huán)之@click點擊事件獲取元素示例
更新時間：2019年11月09日 11:00:17 作者：我相信慢思考的力量
今天小編就為大家分享一篇Vue v-for循環(huán)之@click點擊事件獲取元素示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
應用背景
瀏覽論壇的貼子（數據庫的數據通過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點擊事件獲取元素示例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本文主要介紹vscode中 vue項目es-lint的配置方法，非常不錯，具有一定的參考借鑒價值，需要的的朋友參考下吧2018-07-07
這篇文章主要介紹了Vue項目中keepAlive的使用說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細介紹了基于vuejs實現一個todolist項目，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要介紹了基于vue 實現token驗證的實例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-12-12
這篇文章主要為大家詳細介紹了vue調用語音播放的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
vue3中keep-alive和vue-router的結合使用方式
這篇文章主要介紹了vue3中keep-alive和vue-router的結合使用方式，?具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
詳解vue-cli腳手架build目錄中的dev-server.js配置文件
這篇文章主要介紹了詳解vue-cli腳手架build目錄中的dev-server.js配置文件，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
本篇文章主要介紹了詳解用vue編寫彈出框組件，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要為大家詳細介紹了vue3 Teleport瞬間移動函數使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
在本篇文章里小編給大家整理的是關于Vue數據綁定實例寫法以及相關知識點，需要的朋友們學習下。2019-08-08