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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: