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 相关文章推荐
accesskey 提交
Jun 26 Javascript
关于 byval 与 byref 的区别分析总结
Oct 08 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
Apr 27 Javascript
jquery 年会抽奖程序
Dec 22 Javascript
JS 实现获取打开一个界面中输入的值
Mar 19 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
jQuery判断checkbox是否选中的小例子
Dec 02 Javascript
jquery实现弹出层遮罩效果的简单实例
Mar 03 Javascript
javascript编写贪吃蛇游戏
Jul 07 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
layui表格 列自动适应大小失效的解决方法
Sep 06 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 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
一次编写,随处运行
2006/10/09 PHP
一道求$b相对于$a的相对路径的php代码
2010/08/08 PHP
实例讲解PHP面向对象之多态
2014/08/20 PHP
PHP处理postfix邮件内容的方法
2015/06/16 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
php使用PDO从数据库表中读取数据的实现方法(必看)
2017/06/02 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
用javascript控制iframe滚动的代码
2007/04/10 Javascript
解析jquery中的ajax缓存问题
2013/12/19 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
解决Vue watch里调用方法的坑
2020/11/07 Javascript
利用python实现xml与数据库读取转换的方法
2017/06/17 Python
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
Python输出由1,2,3,4组成的互不相同且无重复的三位数
2018/02/01 Python
示例详解Python3 or Python2 两者之间的差异
2018/08/23 Python
python版本五子棋的实现代码
2018/12/11 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
Python接口自动化系列之unittest结合ddt的使用教程详解
2021/02/23 Python
驴妈妈旅游网:中国新型的B2C旅游电子商务网站
2016/08/16 全球购物
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
会计辞职信范文
2014/01/15 职场文书
网络编辑岗位职责范本
2014/02/10 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
党在我心中的演讲稿
2014/09/13 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
muduo TcpServer模块源码分析
2022/04/26 Redis
Python中的socket网络模块介绍
2022/07/23 Python