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