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 相关文章推荐
Chrome中模态对话框showModalDialog返回值问题的解决方法
May 25 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 Javascript
javascript实现焦点滚动图效果 具体方法
Jun 24 Javascript
Jquery绑定事件(bind和live的区别介绍)
Aug 23 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
Jun 23 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
fullCalendar中文API官方文档
Feb 07 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
Jul 07 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之uniqid()函数用法
2014/11/03 PHP
php返回字符串中所有单词的方法
2015/03/09 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
浅谈Javascript事件处理程序的几种方式
2012/06/27 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
2012/07/17 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
jQuery oLoader实现的加载图片和页面效果
2015/03/14 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
JavaScript知识点总结(十)之this关键字
2016/05/31 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
加快Vue项目的开发速度的方法
2018/12/12 Javascript
React路由鉴权的实现方法
2019/09/05 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
详谈Python基础之内置函数和递归
2017/06/21 Python
Python初学者常见错误详解
2019/07/02 Python
python爬虫---requests库的用法详解
2020/09/28 Python
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
教师业务学习制度
2014/01/25 职场文书
国际贸易系求职信
2014/08/09 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
异地年检委托书范本
2014/09/24 职场文书
高中英语教学反思范文
2016/03/02 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript
Python中re模块的元字符使用小结
2022/04/07 Python
浅析JavaScript中的变量提升
2022/06/01 Javascript