在Vue中獲取自定義屬性方法:data-id的實(shí)例
獲取自定義屬性的方法:
第一步:首先在標(biāo)簽上綁定上@click="getDateId(item.id)",并將屬性值傳到綁定的事件里面
第二步:在標(biāo)簽上繼續(xù)綁定:date-id = "item.id"屬性
第三步:在<script>里面的屬性methods里面添寫上事件函數(shù) getDateId(id){} 在事件函數(shù)里面獲取id的值即可
<template> <h2 class="left t-title" @click='getDataId(item.id)' :data-id="item.id"></h2> </template> <script> methods: { getDataId(id) { console.log(id); } }, </script>
補(bǔ)充知識(shí):vue本地存儲(chǔ)、獲取自定義data-id、獲取鏈接url參數(shù)、頁面跳轉(zhuǎn)返回、修改頁面title
一、本地存儲(chǔ):
localStorage.setItem('uqid','REgaI2eAT9yDfpdc'); //存儲(chǔ)本地(傳死參)
var uqid = localStorage.getItem('uqid'); // 獲取存儲(chǔ)本地值
或者
var orderSn = 20; localStorage.setItem('orderSn',orderSn); var uqid = localStorage.getItem('orderSn');
二、獲取自定義--------data-id
bindList(e){ var autoId = $(e.currentTarget).attr('data-id'); //獲取div -data },
三、獲取鏈接---url參數(shù)
http://localhost:8080/#/lineitem?uqid =2019032817530157997 (獲取---uqid ) bindList(){ var uqid = utils.getUrlKey('uqid'); alert(uqid ); },
以上獲取url參數(shù)需要引入js文件----utils.js
/* eslint-disable */ export default{ getUrlKey: function (name) { return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null } }
main.js全局引入下
import utils from './assets/js/utils.js' //獲取url參數(shù)
global.utils = utils;
四、頁面跳轉(zhuǎn)返回
@click="bindReturn" methods:{ bindReturn(){ this.$router.go(-1); //返回上一頁, }, bindOrider(){ this.$router.push({path: '/doctorlist'}); //頁面跳轉(zhuǎn) }, }
router/index.js文件中
import doctorList from '@/components/doctorlist' export default new Router({ routes: [ { path:'/doctorlist', name:'doctorList ', component:doctorList , meta: { title: '我是修改后的頁面title' } }, ] })
修改頁面title--main.js 最后添加
// 修改頁面title router.beforeEach((to, from, next) => { /* 路由發(fā)生變化修改頁面title */ if (to.meta.title) { document.title = to.meta.title; } next(); })
以上這篇在Vue中獲取自定義屬性方法:data-id的實(shí)例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue中的基礎(chǔ)過渡動(dòng)畫及實(shí)現(xiàn)原理解析
這篇文章主要介紹了Vue中的基礎(chǔ)過渡動(dòng)畫原理解析,需要的朋友可以參考下2018-12-12vue中element 上傳功能的實(shí)現(xiàn)思路
這篇文章主要介紹了vue中element 的上傳功能的實(shí)現(xiàn)思路,本文大概通過兩種實(shí)現(xiàn)思路,具體內(nèi)容詳情大家跟隨腳本之家小編一起看看吧2018-07-07談?wù)剬ue響應(yīng)式數(shù)據(jù)更新的誤解
本篇文章主要介紹了談?wù)剬ue響應(yīng)式數(shù)據(jù)更新的誤解,深入了解了vue響應(yīng)式數(shù)據(jù),有興趣的可以了解一下2017-08-08vue實(shí)現(xiàn)用戶動(dòng)態(tài)權(quán)限登錄的代碼示例
這篇文章主要介紹了vue如何實(shí)現(xiàn)用戶動(dòng)態(tài)權(quán)限登錄,文中的代碼示例介紹的非常詳細(xì),對大家學(xué)習(xí)vue有一定的幫助,需要的朋友可以參考閱讀2023-05-05編寫Vue項(xiàng)目,如何給數(shù)組的第一位添加對象數(shù)據(jù)
這篇文章主要介紹了編寫Vue項(xiàng)目,如何給數(shù)組的第一位添加對象數(shù)據(jù),具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04vue中的base64圖片轉(zhuǎn)網(wǎng)絡(luò)URL方式
在Vue中,可以直接將Base64編碼的圖片賦值給img元素的src屬性,此外,也可以通過JavaScript的URL.createObjectURL()方法將Base64轉(zhuǎn)換為Blob URL,進(jìn)而轉(zhuǎn)換為File對象,并可進(jìn)一步轉(zhuǎn)換為PNG或其他格式的圖片,這種轉(zhuǎn)換技術(shù)在前端開發(fā)中非常實(shí)用2024-10-10關(guān)于vue-socket.io使用及版本原因消息無法監(jiān)聽bug
這篇文章主要介紹了關(guān)于vue-socket.io使用及版本原因消息無法監(jiān)聽bug,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10