vue利用事件委托实现按钮互斥,并传递对应的值
生活随笔
收集整理的這篇文章主要介紹了
vue利用事件委托实现按钮互斥,并传递对应的值
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果如下:
事件委托:也稱事件代理
原理:事件委托就是利用事件冒泡，指定一個事件處理程序，就可以管理這一類型的所有事件。
應用場景:我有一個ul標簽，下面有很多li標簽，每個li標簽都需要添加事件，難道我們要獲取每個li然后在添加事件嗎？ 這樣太浪費內存了，也不利于網頁性能優化，我們要盡可能減少dom操作，所以我們能不能只給ul添加點擊事件，然后利用事件冒泡，這樣每個li標簽都有事件了.
效果的代碼:
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style>#beta ul li {display: inline-block;width: 40px;background-color: #3cc3bd;margin-left: 10px;text-align: center;cursor: pointer;color: #fff;}#beta ul li.variation {background-color: #fd5262;}</style><!-- 通過cdn引入vue.js --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body><div id="beta"><ul @click="entrust"><liv-for="(item,index) in dataList":key="index":data-index="index":data-item="item.name":class="{variation: pitchOn == index}">{{ item.name }}</li></ul></div></body><script>new Vue({el: '#beta',data: {message: '',pitchOn: 0,dataList: [{name: '趙云'},{name: '韓信'},{name: '劉禪'},{name: '貂蟬'},{name: '李白'}]},methods: {entrust(e) {var dom = e.targetvar index = dom.getAttribute('data-index')// 當點擊到按鈕外時,不執行if (index !== null) {var item = dom.getAttribute('data-item')this.pitchOn = indexconsole.log('我的下標為:', index, '對應的值為:', item)}}}})</script> </html>部分解析:
1.在vue中可以直接給ul 添加點擊事件, vue框架會自動生成事件委托
2.如果想要獲取點擊的li 標簽,只需要在標簽屬性上添加一個data-xxx,再通過getAttribute獲取值就可以了
總結
以上是生活随笔為你收集整理的vue利用事件委托实现按钮互斥,并传递对应的值的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 思考的方法--张五常（1984 年 1
- 下一篇： vue pc端web页面微信支付和支付宝