当前位置:首页 >> 网络编程

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

如下所示:

<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="/UploadFiles/2021-04-02/vue">

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操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。