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 相关文章推荐
javascript 动态创建表格的2种方法总结
Mar 04 Javascript
简述JavaScript中正则表达式的使用方法
Jun 15 Javascript
Node.js插件安装图文教程
May 06 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
Nov 29 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
JS实现电商放大镜效果
Aug 24 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
vue如何进行动画的封装
Sep 26 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
jQuery实现弹幕特效
Nov 29 jQuery
原生javascript制作的拼图游戏实现方法详解
Feb 23 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 和 COM
2006/10/09 PHP
我的论坛源代码(十)
2006/10/09 PHP
巧用php中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
php使用变量动态创建类的对象用法示例
2017/02/06 PHP
PHP中Cookie的使用详解(简单易懂)
2017/04/28 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
window.location和document.location的区别分析
2008/12/23 Javascript
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
2013/04/18 Javascript
JQuery写动态树示例代码
2013/07/31 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
2016/03/01 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
2017/09/30 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
2018/08/13 Javascript
微信小程序合法域名配置方法
2019/05/06 Javascript
利用原生JavaScript实现造日历轮子实例代码
2019/05/08 Javascript
python中split方法用法分析
2015/04/17 Python
Python中二维列表如何获取子区域元素的组成
2017/01/19 Python
python join方法使用详解
2019/07/30 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
Python使用Pandas库常见操作详解
2020/01/16 Python
浅谈Python协程
2020/06/17 Python
韩国休闲女装品牌网站:ANAIS
2016/08/24 全球购物
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
Currentbody法国:健康与美容高科技产品
2020/08/16 全球购物
门面房租房协议书
2014/08/20 职场文书
党旗在我心中演讲稿
2014/09/15 职场文书
2014年党建工作总结
2014/11/11 职场文书
离职感谢信怎么写
2015/01/22 职场文书
2015年测量员工作总结
2015/05/23 职场文书
最新的离婚协议书范本!
2019/07/02 职场文书
Pygame Event事件模块的详细示例
2021/11/17 Python