Vue v-for循环之@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>

使用场景不同，优势不同

以上这篇Vue v-for循环之@click点击事件获取元素示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

Vue v-for循环之@click点击事件获取元素示例

请登录后发表评论