vue 通过绑定事件获取当前行的id操作


Posted in Javascript onJuly 27, 2020

如下所示:

<div @click="router(items.productId)" style="float: left;" :key='items.productName' v-for="items in item"> </div>

获取:

router(e){
       conslone.log(e);
     }

补充知识:Vue.js的事件(单双击、鼠标和键盘)以及阻止事件冒泡

自己随便琢磨了一个小的Demo,实现了一些事件和阻止事件冒泡,具体的代码如下,注释在代码里

html文件

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"></meta>
 <title>VueDemo</title>
 <link rel="stylesheet" href="style.css" rel="external nofollow" ></head>
 <script src="https://unpkg.com/vue"></script>
</head>
<body>
 <div id="vue-app"> 
 <h1>事件</h1>
 <!-- 点击事件的绑定可以用v-on修饰click也可以在click前面添加@来修饰,表示点击实际,click.once表示该事件只能点击一次,点击一次之后就不能再点击了,dblclick是doubleclick的缩写,表示双击,即双击button才能够有效 -->
 <button @click.once="add(1)">加一</button>
 <button v-on:click="sub(1)">减一</button>
 <button v-on:dblclick="add(10)">加十</button>
 <button v-on:dblclick="sub(10)">减十</button>
 <p>数值是 {{number}} </p>
 
 <!-- 以下方法是通过一个updatexy方法来获取canvas区域内的鼠标的坐标值,并且通过一个stopmove方法来阻止鼠标的移动事件,即当鼠标移动到stopmove这个span的时候不能够获得x,y的值, -->
 <div id="canvas" v-on:mousemove="updateXY">{{X}},{{Y}}
  -<span v-on:mousemove="stopmove">Stop Move</span>
 </div>
 <!-- 除了通过stopmove方法来定义阻止鼠标的移动事件还可以 v-on:mousemove.stop的方式,即后面不需要添加方法即可 
  <div id="canvas" v-on:mousemove="updateXY">{{X}},{{Y}}
  -<span v-on:mousemove.stop="">Stop Move</span>
 </div> -->
 
 <!-- 点击跳转百度官网:v-on:click="alert()"在点击百度官网的时候,会弹出对话框,然后跳转到百度官网地址,在click后面加prevent,表示保持,即能够弹出对话框,但页面不跳转 -->
 <a v-on:click.prevent="alert()" href="http://www.baidu.com" rel="external nofollow" >百度官网</a>
 
 <!-- 键盘事件 -->
 <div id="key">
  <label>账号</label>
  <!-- 键盘按键按下调用printName方法 -->
  <input type="text" @keyup="printName"> 
  <label>密码</label>
  <!-- keydown和keyup方法一样都是键盘事件的处罚 -->
  <!-- <input type="text" @keydown="printPsw"> -->
  <!-- keydown.enter表示只有当enter键按下的时候才会触发事件,同理可以有其他的组合键比如keydown.shift.enter等等 -->
  <input type="text" @keydown.enter="printPsw"> 
 </div>
 </div>
 <script src="app.js"></script>
</body>
</html>

js文件

new Vue({
 el:"#vue-app",
 // el:element 需要获取的元素,一定是html中的根容器元素
 data:{
 number:30,
 X:0,
 Y:0,
 },
 methods:{
 add: function(insc){
  this.number += insc;
 },
 sub: function(desc){
  this.number -= desc;
 },
 
 updateXY:function(event){
  // 输出鼠标的所有属性,其中offsetX(Y)表示鼠标的坐标值
  console.log(event)
  this.X = event.offsetX;
  this.Y = event.offsetY;
 },
 stopmove:function(event){
  event.stopPropagation;
 },
 alert:function(){
  alert("hello world")
 },
 printName:function(){
  console.log("该事件被调用");
 },
 printPsw:function(){
  console.log("该事件被调用");
 
 }
 }
 
});

css文件

#canvas{
 width: 600px;
 padding: 200px 20px;
 text-align: center;
 border: 1px solid red;
}

实现效果如下:

vue 通过绑定事件获取当前行的id操作

vue 通过绑定事件获取当前行的id操作

vue 通过绑定事件获取当前行的id操作

vue 通过绑定事件获取当前行的id操作

vue 通过绑定事件获取当前行的id操作

vue 通过绑定事件获取当前行的id操作

以上这篇vue 通过绑定事件获取当前行的id操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery获取文本节点之 text()/val()/html() 方法区别
Mar 01 Javascript
基于jquery的button默认enter事件(回车事件)。
May 18 Javascript
让你的博客飘雪花超出屏幕依然看得见
Jan 04 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 Javascript
JS实现DIV容器赋值的方法
Dec 14 Javascript
js添加千分位的实现代码(超简单)
Aug 01 Javascript
浅谈jquery的html方法里包含特殊字符的处理
Nov 30 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
Angular4开发解决跨域问题详解
Aug 28 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 Javascript
使用layui实现树形结构的方法
Sep 20 Javascript
Element Rate 评分的使用方法
Jul 27 #Javascript
Element InputNumber计数器的使用方法
Jul 27 #Javascript
基于Vue中的父子传值问题解决
Jul 27 #Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 #Javascript
JS图片懒加载技术实现过程解析
Jul 27 #Javascript
Element Notification通知的实现示例
Jul 27 #Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 #Javascript
You might like
最令PHP初学者头痛的十四个问题
2006/07/12 PHP
PHP VS ASP
2006/10/09 PHP
php设计模式 Template (模板模式)
2011/06/26 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
php array_map()函数实例用法
2021/03/03 PHP
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
jQuery实现轮播图及其原理详解
2020/04/12 jQuery
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
javascript设计模式之迭代器模式
2020/01/30 Javascript
Python中subprocess模块用法实例详解
2015/05/20 Python
python获得一个月有多少天的方法
2015/06/04 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
Selenium鼠标与键盘事件常用操作方法示例
2018/08/13 Python
python使用rpc框架gRPC的方法
2018/08/24 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
HTML5样式控制示例代码
2013/11/27 HTML / CSS
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
法律专业个人实习自我鉴定
2013/09/23 职场文书
军训心得体会
2013/12/31 职场文书
保险专业大学生职业规划书
2014/03/03 职场文书
高中家长寄语
2014/04/02 职场文书
篝火晚会策划方案
2014/05/16 职场文书
铣工实训报告
2014/11/05 职场文书
搞笑Gif:这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记