Vue v-for循環(huán)之@click點(diǎn)擊事件獲取元素示例

發(fā)布時(shí)間：2020-08-31 18:55:56 來(lái)源：腳本之家閱讀：241 作者：我相信慢思考的力量欄目：web開(kāi)發(fā)

應(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í)例 - 菜鳥教程(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í)例 - 菜鳥教程(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è)參考，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

Vue v-for循環(huán)之@click點(diǎn)擊事件獲取元素示例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽