在Vue中获取自定义属性方法:data-id的实例


Posted in Javascript onSeptember 09, 2020

获取自定义属性的方法:

第一步:首先在标签上绑定上@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的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS控件的生命周期介绍
Oct 22 Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 Javascript
为jQuery添加Webkit的触摸的方法分享
Feb 02 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
May 22 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
浅谈javascript中执行环境(作用域)与作用域链
Dec 08 Javascript
vue 使用eventBus实现同级组件的通讯
Mar 02 Javascript
微信小程序签到功能
Oct 31 Javascript
vue+webpack中配置ESLint
Nov 07 Javascript
javascript实现文字跑马灯效果
Jun 18 Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 #Javascript
vue实现几秒后跳转新页面代码
Sep 09 #Javascript
JS异步宏队列微队列原理详解
Sep 09 #Javascript
vue 项目软键盘回车触发搜索事件
Sep 09 #Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 #Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 #Javascript
JS实现斐波那契数列的五种方式(小结)
Sep 09 #Javascript
You might like
php中filter函数验证、过滤用户输入的数据
2014/01/13 PHP
php操作MongoDB类实例
2015/06/17 PHP
什么是PEAR?什么是PECL?PHP中两个容易混淆的概念解释
2015/07/01 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
Track Image Loading效果代码分析
2007/08/13 Javascript
百度地图自定义控件分享
2015/03/04 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
jQuery模拟窗口抖动效果
2017/03/15 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
JavaScript之数组扁平化详解
2019/06/03 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
2020/11/18 Vue.js
浅析Python多线程下的变量问题
2015/04/28 Python
Python进程间通信Queue实例解析
2018/01/25 Python
Python3.遍历某文件夹提取特定文件名的实例
2018/04/26 Python
python实现比较文件内容异同
2018/06/22 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
小班秋游活动方案
2014/02/22 职场文书
代理人委托书
2014/08/01 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书
vue使用element-ui按需引入
2022/05/20 Vue.js
JavaScript前端面试扁平数据转tree与tree数据扁平化
2022/06/14 Javascript