vue 通過綁定事件獲取當(dāng)前行的id操作
更新時間：2020年07月27日 11:24:27 作者：隨★風(fēng)
這篇文章主要介紹了vue 通過綁定事件獲取當(dāng)前行的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，實現(xiàn)了一些事件和阻止事件冒泡，具體的代碼如下，注釋在代碼里
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>數(shù)值是 {{number}} </p>
<!-- 以下方法是通過一個updatexy方法來獲取canvas區(qū)域內(nèi)的鼠標的坐標值，并且通過一個stopmove方法來阻止鼠標的移動事件，即當(dāng)鼠標移動到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> -->
<!-- 點擊跳轉(zhuǎn)百度官網(wǎng)：v-on:click="alert()"在點擊百度官網(wǎng)的時候，會彈出對話框，然后跳轉(zhuǎn)到百度官網(wǎng)地址，在click后面加prevent，表示保持，即能夠彈出對話框，但頁面不跳轉(zhuǎn) -->
<a v-on:click.prevent="alert()" rel="external nofollow" >百度官網(wǎng)</a>
<!-- 鍵盤事件 -->
<div id="key">
<label>賬號</label>
<!-- 鍵盤按鍵按下調(diào)用printName方法 -->
<input type="text" @keyup="printName">
<label>密碼</label>
<!-- keydown和keyup方法一樣都是鍵盤事件的處罰 -->
<!-- <input type="text" @keydown="printPsw"> -->
<!-- keydown.enter表示只有當(dāng)enter鍵按下的時候才會觸發(fā)事件，同理可以有其他的組合鍵比如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("該事件被調(diào)用");
},
printPsw:function(){
console.log("該事件被調(diào)用");
}
}
});
css文件
#canvas{
width: 600px;
padding: 200px 20px;
text-align: center;
border: 1px solid red;
}
實現(xiàn)效果如下：
以上這篇vue 通過綁定事件獲取當(dāng)前行的id操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了vue數(shù)據(jù)綁定的相關(guān)知識，具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
在vue中使用Echarts利用watch做動態(tài)數(shù)據(jù)渲染操作
這篇文章主要介紹了在vue中使用Echarts利用watch做動態(tài)數(shù)據(jù)渲染操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue項目打包部署Nginx服務(wù)器后,刷新頁面后出現(xiàn)404的問題,下面這篇文章主要給大家介紹了關(guān)于前端部署踩坑的實戰(zhàn)記錄,文中包括部署后404、頁面空白等問題的解決辦法,需要的朋友可以參考下2024-09-09
vue項目實現(xiàn)減少app.js和vender.js的體積操作
這篇文章主要介紹了vue項目實現(xiàn)減少app.js和vender.js的體積操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
WebStorm啟動vue項目報錯代碼:1080?throw?err解決辦法
在使用webstorm新建vue項目時常會遇到一些報錯,下面這篇文章主要給大家介紹了關(guān)于WebStorm啟動vue項目報錯代碼:1080?throw?err的解決辦法,文中將解決辦法介紹的非常詳細,需要的朋友可以參考下2023-12-12
本篇文章主要介紹了vue 的keep-alive緩存功能的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細介紹了vue實現(xiàn)原生下拉刷新，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了詳解Vue自定義hook函數(shù)，hook函數(shù)本質(zhì)是一個函數(shù)，把setup函數(shù)中使用的Composition?API進行了封裝，更多相關(guān)內(nèi)容感興趣的朋友可以參考一下2022-06-06
在移動端使用vue-router和keep-alive的方法示例
這篇文章主要介紹了在移動端使用vue-router和keep-alive的方法示例，vue-router與keep-alive提供的路由體驗與移動端是有一定差別的，感興趣的小伙伴們可以參考一下2018-12-12
vue里提供了keep-alive組件用來緩存狀態(tài),這篇文章主要給大家介紹了關(guān)于vue中keepAlive組件的作用和使用方法的相關(guān)資料,需要的朋友可以參考下2021-07-07