vue 通過綁定事件獲取當(dāng)前行的id操作
如下所示：
<div @click='router(items.productId)' :key=’items.productName’ v-for='items in item'> </div>
獲取：
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='http://m.b3g6.com/bcjs/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> <!-- 以下方法是通過一個(gè)updatexy方法來獲取canvas區(qū)域內(nèi)的鼠標(biāo)的坐標(biāo)值，并且通過一個(gè)stopmove方法來阻止鼠標(biāo)的移動(dòng)事件，即當(dāng)鼠標(biāo)移動(dòng)到stopmove這個(gè)span的時(shí)候不能夠獲得x，y的值， --> <div v-on:mousemove='updateXY'>{{X}},{{Y}} -<span v-on:mousemove='stopmove'>Stop Move</span> </div> <!-- 除了通過stopmove方法來定義阻止鼠標(biāo)的移動(dòng)事件還可以 v-on:mousemove.stop的方式，即后面不需要添加方法即可 <div 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ì)彈出對話框，然后跳轉(zhuǎn)到百度官網(wǎng)地址，在click后面加prevent，表示保持，即能夠彈出對話框，但頁面不跳轉(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='http://m.b3g6.com/bcjs/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)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. PHP驗(yàn)證碼工具－Securimage2. 一文帶你徹底理解Java序列化和反序列化3. 關(guān)于IDEA 2020.3 多窗口視圖丟失的問題4. JS實(shí)現(xiàn)前端動(dòng)態(tài)分頁碼代碼實(shí)例5. javascript實(shí)現(xiàn)貪吃蛇小練習(xí)6. 用Spring JMS使異步消息變得簡單7. js實(shí)現(xiàn)碰撞檢測8. Python 制作查詢商品歷史價(jià)格的小工具9. ASP.NET MVC使用jQuery ui的progressbar實(shí)現(xiàn)進(jìn)度條10. Python 下載Bing壁紙的示例
網(wǎng)公網(wǎng)安備