在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 相关文章推荐
基于jQuery的Spin Button自定义文本框数值自增或自减
Jul 17 Javascript
实现web打印的各种方法介绍及实现代码
Jan 09 Javascript
jquery将一个表单序列化为一个对象的方法
Dec 02 Javascript
JavaScript内存管理介绍
Mar 13 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
AngularJS入门示例之Hello World详解
Jan 04 Javascript
vue-resourse将json数据输出实例
Mar 08 Javascript
vue中SPA单页面应用程序详解
Nov 07 Javascript
vue动态路由配置及路由传参的方式
May 23 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 Javascript
150行代码带你实现微信小程序中的数据侦听
May 17 Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 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简单命令代码集锦
2007/09/24 PHP
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
php中通过curl smtp发送邮件
2012/06/05 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
PHP编写简单的App接口
2016/08/28 PHP
javascript IFrame 强制刷新代码
2009/07/23 Javascript
flexigrid 参数说明
2010/11/23 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
微信小程序中显示html格式内容的方法
2017/04/25 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
python使用循环实现批量创建文件夹示例
2014/03/25 Python
在Python中使用Mako模版库的简单教程
2015/04/08 Python
Python中的descriptor描述器简明使用指南
2016/06/02 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
利用Python实现字幕挂载(把字幕文件与视频合并)思路详解
2020/10/21 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
银行职员自我鉴定
2014/04/20 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
镇人大副主席民主生活会对照检查材料思想汇报
2014/10/01 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
《包身工》教学反思
2016/02/23 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书
JS的深浅复制详细
2021/10/16 Javascript
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis