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);
}
補(bǔ)充知識：Vue.js的事件(單雙擊、鼠標(biāo)和鍵盤)以及阻止事件冒泡
自己隨便琢磨了一個小的Demo，實(shí)現(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>
<!-- 點(diǎn)擊事件的綁定可以用v-on修飾click也可以在click前面添加@來修飾，表示點(diǎn)擊實(shí)際，click.once表示該事件只能點(diǎn)擊一次，點(diǎn)擊一次之后就不能再點(diǎn)擊了，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)的鼠標(biāo)的坐標(biāo)值，并且通過一個stopmove方法來阻止鼠標(biāo)的移動事件，即當(dāng)鼠標(biāo)移動到stopmove這個span的時候不能夠獲得x，y的值， -->
<div id="canvas" v-on:mousemove="updateXY">{{X}},{{Y}}
-<span v-on:mousemove="stopmove">Stop Move</span>
</div>
<!-- 除了通過stopmove方法來定義阻止鼠標(biāo)的移動事件還可以 v-on:mousemove.stop的方式，即后面不需要添加方法即可
<div id="canvas" v-on:mousemove="updateXY">{{X}},{{Y}}
-<span v-on:mousemove.stop="">Stop Move</span>
</div> -->
<!-- 點(diǎn)擊跳轉(zhuǎn)百度官網(wǎng)：v-on:click="alert()"在點(diǎn)擊百度官網(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){
// 輸出鼠標(biāo)的所有屬性，其中offsetX（Y）表示鼠標(biāo)的坐標(biāo)值
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;
}
實(shí)現(xiàn)效果如下：
以上這篇vue 通過綁定事件獲取當(dāng)前行的id操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
淺談在Vue.js中如何實(shí)現(xiàn)時間轉(zhuǎn)換指令
這篇文章主要介紹了淺談在Vue.js中如何實(shí)現(xiàn)時間轉(zhuǎn)換指令，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
Vue 針對瀏覽器參數(shù)過長實(shí)現(xiàn)瀏覽器參數(shù)加密解密的操作方法
文章介紹了如何在Vue項(xiàng)目中使用crypto-js庫對瀏覽器參數(shù)進(jìn)行加密和解密,以解決參數(shù)過長的問題,在router/index.js中添加了相關(guān)代碼,并在utils工具類中添加了encryption.js和query.js源碼,感興趣的朋友一起看看吧2024-12-12
基于Vue.js實(shí)現(xiàn)一個完整的登錄功能
在現(xiàn)代Web應(yīng)用中,用戶登錄功能是一個核心模塊,它不僅涉及到用戶身份驗(yàn)證,還需要處理表單驗(yàn)證、狀態(tài)管理、接口調(diào)用等多個環(huán)節(jié),本文將基于一個Vue.js項(xiàng)目中的登錄功能實(shí)現(xiàn),深入解析其背后的技術(shù)細(xì)節(jié),幫助開發(fā)者更好地理解和實(shí)現(xiàn)類似功能,需要的朋友可以參考下2025-02-02
這篇文章主要為大家介紹了Avue?組件庫的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要給大家介紹了關(guān)于對vue生命周期的深入理解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
vue自定義穿梭框支持遠(yuǎn)程滾動加載的實(shí)現(xiàn)方法
這篇文章主要介紹了vue自定義穿梭框支持遠(yuǎn)程滾動加載,iview是全局注入，基本使用原先的類名進(jìn)行二次創(chuàng)建公共組件，修改基礎(chǔ)js實(shí)現(xiàn)邏輯，本文結(jié)合實(shí)例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-08-08
vue多級復(fù)雜列表展開/折疊及全選/分組全選實(shí)現(xiàn)
這篇文章主要介紹了vue多級復(fù)雜列表展開/折疊及全選/分組全選實(shí)現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了vue:axios請求本地json路徑錯誤問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
vue2 mint-ui loadmore實(shí)現(xiàn)下拉刷新,上拉更多功能
這篇文章主要介紹了vue2 mint-ui loadmore實(shí)現(xiàn)下拉刷新,上拉更多功能,需要的朋友可以參考下2018-03-03
vue3限制table表格選項(xiàng)個數(shù)的解決方法
這篇文章主要為大家詳細(xì)介紹了vue3限制table表格選項(xiàng)個數(shù)的解決方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04