快捷導(dǎo)航

vue.js 獲取當(dāng)前自定義屬性值

更新時(shí)間：2017年06月01日 16:23:44 作者：Fayin

本篇文章主要介紹了vue.js 獲取當(dāng)前自定義屬性值，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

假設(shè)有一個(gè)標(biāo)簽h5, 我們給它添加了一個(gè)自定義屬性值，（item.id是從動(dòng)態(tài)添加的）

點(diǎn)擊h5 標(biāo)簽，如何才能獲取當(dāng)前對(duì)應(yīng)的自定義屬性值呢？

想當(dāng)然的我最開始這樣寫：

<h5 class="left t-title" @click='getDataId' :data-id="item.id"></h5>

<script>
  methods: {
    getDataId() {
      console.log(this.data-id);
    }
   },
  
</script>

顯然，這樣是拿不到 data-id的值的。。。。

應(yīng)該這樣做：

<h5 class="left t-title" @click='getDataId(item.id)' :data-id="item.id"></h5>

<script>
  methods: {
    getDataId(id) {
      console.log(id);
    }
   },
  
</script>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

el-dialog關(guān)閉再打開后窗口內(nèi)容不刷新問題及解決
這篇文章主要介紹了el-dialog關(guān)閉再打開后窗口內(nèi)容不刷新問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-02-02
Vue使用自定義指令實(shí)現(xiàn)頁(yè)面底部加水印
本文主要實(shí)現(xiàn)給項(xiàng)目的整個(gè)背景加上自定義水印，可以改變水印的文案和字體顏色等，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
Vue.extend 編程式插入組件的實(shí)現(xiàn)
這篇文章主要介紹了Vue.extend 編程式插入組件的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
Vue3中使用匿名函數(shù)的方法實(shí)現(xiàn)
Lambda函數(shù),也稱為匿名函數(shù),是Vue3中的一種函數(shù)類型,綁定匿名方法和綁定普通方法主要是寫法上的區(qū)別,其他的區(qū)別并不是很大,本文主要介紹了Vue3中使用匿名函數(shù)的方法實(shí)現(xiàn),感興趣的可以了解一下
2023-12-12
vue中關(guān)于router.beforeEach()的用法
這篇文章主要介紹了vue中關(guān)于router.beforeEach()的用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-11-11
Vue實(shí)現(xiàn)日歷小插件
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)日歷小插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-06-06
vue中el-tree結(jié)合el-switch實(shí)現(xiàn)開關(guān)狀態(tài)切換
本文主要介紹了vue中el-tree結(jié)合el-switch實(shí)現(xiàn)開關(guān)狀態(tài)切換,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-12-12
vue3自定義組件之v-model實(shí)現(xiàn)父子組件雙向綁定
這篇文章主要介紹了vue3自定義組件之v-model實(shí)現(xiàn)父子組件雙向綁定方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
詳解vue-cli構(gòu)建項(xiàng)目反向代理配置
本篇文章主要介紹了詳解vue-cli構(gòu)建項(xiàng)目反向代理配置，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09
Vue引入路徑正確但一直報(bào)錯(cuò)問題:Already included file name&n
這篇文章主要介紹了Vue引入路徑正確但一直報(bào)錯(cuò):Already included file name ‘×××‘ differs from file name ‘×××‘ only in casing.具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-12-12