在Vue中獲取自定義屬性方法:data-id的例項
阿新 • • 發佈:2020-09-10
獲取自定義屬性的方法:
第一步:首先在標籤上繫結上@click="getDateId(item.id)",並將屬性值傳到繫結的事件裡面
第二步:在標籤上繼續繫結:date-id = "item.id"屬性
第三步:在<script>裡面的屬性methods裡面添寫上事件函式 getDateId(id){} 在事件函式裡面獲取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>
補充知識:vue本地儲存、獲取自定義data-id、獲取連結url引數、頁面跳轉返回、修改頁面title
一、本地儲存:
localStorage.setItem('uqid','REgaI2eAT9yDfpdc'); //儲存本地(傳死參)
var uqid = localStorage.getItem('uqid'); // 獲取儲存本地值
或者
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引數
http://localhost:8080/#/lineitem?uqid =2019032817530157997 (獲取---uqid ) bindList(){ var uqid = utils.getUrlKey('uqid'); alert(uqid ); },
以上獲取url引數需要引入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引數
global.utils = utils;
四、頁面跳轉返回
@click="bindReturn" methods:{ bindReturn(){ this.$router.go(-1); //返回上一頁, },bindOrider(){ this.$router.push({path: '/doctorlist'}); //頁面跳轉 },}
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) => { /* 路由發生變化修改頁面title */ if (to.meta.title) { document.title = to.meta.title; } next(); })
以上這篇在Vue中獲取自定義屬性方法:data-id的例項就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。