在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调试技巧解决样式问题的步骤分享
Mar 15 Javascript
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
Mar 03 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
JavaScript动态生成二维码图片
Apr 20 Javascript
BOM之navigator对象和用户代理检测
Feb 10 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
vuex进阶知识点巩固
May 20 Javascript
layui 设置table 行的高度方法
Aug 17 Javascript
基于Three.js实现360度全景图片
Dec 30 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 Javascript
Node实现搜索框进行模糊查询
Jun 28 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数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
探讨php中遍历二维数组的几种方法详解
2013/06/08 PHP
基于PHP文件操作的详细诠释
2013/06/21 PHP
PHP生成网站桌面快捷方式代码分享
2014/10/11 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
比较搞笑的js陷阱题
2010/02/07 Javascript
javascript中的继承实例代码
2011/04/27 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
python基础教程之Filter使用方法
2017/01/17 Python
面向初学者的Python编辑器Mu
2018/10/08 Python
python 搜索大文件的实例代码
2019/07/08 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
HTML5实现移动端弹幕动画效果
2019/08/01 HTML / CSS
融资合作协议书范本
2014/10/17 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
2016七夕情人节感言
2015/12/09 职场文书
vue基于Teleport实现Modal组件
2021/05/31 Vue.js
【2·13】一图读懂中国无线电发展
2022/02/18 无线电
Java实现带图形界面的聊天程序
2022/06/10 Java/Android