vue如何獲取自定義元素屬性參數(shù)值的方法
更新時間：2019年05月14日 14:22:47 作者：lotSeed_5
這篇文章主要介紹了vue如何獲取自定義元素屬性參數(shù)值的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
偶爾還是會陷入到DOM操作上面去，其實你應(yīng)該關(guān)心的是數(shù)據(jù)傳遞，而不是操作DOM。如果你是想獲取data-num的數(shù)據(jù)，可以這樣寫：
<span @click="getData($event,'21')">55</span>
getData:function (e,num) {
console.log(num)
}
這樣就可以取到這個值了，如果你是確實想操作DOM，那你可以這樣寫：
<span data-num="21" ref="dataNum" @click="getData($event)">55</span>
getData:function (e) {
console.log(this.$refs.dataNum.dataset.num);
}
2.通過e.target.getAttribute
<div id="app">
<span data-num="21" @click="getData($event)">55</span>
</div>
new Vue({
el:'#app',
methods:{
getData:function (e) {
console.log(e.target.getAttribute('data-num'))
}
}
})
3.自定義命名
如：html
<div class="live-dd" numId = "<{$item.id}>"></div>
js:
$('.live-dd').on("click",function(){var num = this.getAttribute('numId');location.href='/live/info?id='+num;})
使用jq的方法
<span class="vk_cq5" classid="<{$smarty.get.id}>">
var live_id = $('.vk_cq5').attr('classid')
ref的用法 相當(dāng)于操作dom
html :
<div> <div id="box" ref="mybox"> DEMO </div> </div>
js:
export default {
data () {
return {
}
},
mounted () {
this.init();
},
methods:{
init() {
const self = this;
this.$refs.mybox.style.color = 'red';
setTimeout(() => {
self.$refs.mybox.style.color = 'blue';
},2000)
}
}
}
以上所述是小編給大家介紹的vue如何獲取自定義元素屬性參數(shù)值的方法詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vue實現(xiàn)的仿淘寶購物車功能,結(jié)合完整實例形式較為詳細(xì)的分析了vue.js仿淘寶購物車功能的具體樣式、功能相關(guān)實現(xiàn)技巧與操作注意事項,需要的朋友可以參考下2019-01-01
vue3實現(xiàn)模擬地圖站點名稱按需顯示的功能(車輛模擬地圖)
最近在做車輛模擬地圖,在實現(xiàn)控制站點名稱按需顯示,下面通過本文給大家分享vue3實現(xiàn)模擬地圖站點名稱按需顯示的功能,感興趣的朋友跟隨小編一起看看吧2024-06-06
這篇文章主要介紹了uniapp的生命周期,應(yīng)用生命周期是指應(yīng)用程序從啟動到關(guān)閉的整個過程，包括應(yīng)用程序的啟動、前后臺切換、退出等,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Vue-element中el-input輸入卡頓問題的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue3之組件狀態(tài)保持KeepAlive的簡單使用
這篇文章主要介紹了Vue3之組件狀態(tài)保持KeepAlive的簡單使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
解決vue2.0 element-ui中el-upload的before-upload方法返回false時submit(
這篇文章主要介紹了vue2.0 element-ui中el-upload的before-upload方法返回false時submit()不生效的解決方法，這里需要主要項目中用的element-ui是V1.4.3，感興趣的朋友參考下吧2018-08-08
vue中使用elementui實現(xiàn)樹組件tree右鍵增刪改功能
這篇文章主要介紹了vue中使用elementui實現(xiàn)對樹組件tree右鍵增刪改功能,右擊節(jié)點可進(jìn)行增刪改，對節(jié)點數(shù)據(jù)進(jìn)行模糊查詢功能，本文給大家分享了完整代碼，需要的朋友可以參考下2022-08-08
Vue3項目中優(yōu)雅實現(xiàn)微信授權(quán)登錄的方法
用戶在微信端中訪問第三方網(wǎng)頁,可以通過微信網(wǎng)頁授權(quán)機(jī)制獲取用戶的基本信息,進(jìn)而實現(xiàn)所需要的業(yè)務(wù)邏輯,這篇文章主要給大家介紹了關(guān)于Vue3項目中優(yōu)雅實現(xiàn)微信授權(quán)登錄的相關(guān)資料,需要的朋友可以參考下2021-09-09
React組件通信之路由傳參(react-router-dom)
本文主要介紹了React組件通信之路由傳參(react-router-dom)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了vue實現(xiàn)PC端分辨率適配操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08