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


Posted in Javascript onNovember 09, 2019

应用背景

浏览论坛的贴子(数据库的数据通过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点击事件获取元素示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
Nov 06 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
纯JS代码实现气泡效果
May 04 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
React Native实现简单的登录功能(推荐)
Sep 19 Javascript
jquery实现输入框实时输入触发事件代码
Dec 21 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 Javascript
jQuery解析返回的xml和json方法详解
Jan 05 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
ES6实现的遍历目录函数示例
Apr 07 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
vue使用自定义icon图标的方法
May 14 Javascript
Vue实现页面添加水印功能
Nov 09 #Javascript
vue 实现特定条件下绑定事件
Nov 09 #Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
Nov 09 #Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 #Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 09 #Javascript
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 #Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 #Javascript
You might like
php在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
php 从指定数字中获取随机组合的简单方法(推荐)
2017/04/05 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
javascript之水平横向滚动歌词同步的应用
2007/05/07 Javascript
javascript 闭包
2011/09/15 Javascript
JQuery Highcharts 动态生成图表的方法
2013/11/15 Javascript
JQuery鼠标移到小图显示大图效果的方法
2015/06/10 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
vue+iview使用树形控件的具体使用
2020/11/02 Javascript
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
Python中字符串的格式化方法小结
2016/05/03 Python
利用Python破解验证码实例详解
2016/12/08 Python
python matplotlib画图实例代码分享
2017/12/27 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
python二维列表一维列表的互相转换实例
2018/07/02 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
物流管理专业毕业生求职信
2014/03/23 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
党员民主评议自我评价
2014/10/20 职场文书
慰问信格式
2015/02/14 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
党员转正意见怎么写
2015/06/03 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
基于Redis结合SpringBoot的秒杀案例详解
2021/10/05 Redis