在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拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
Aug 14 Javascript
超赞的动手创建JavaScript框架的详细教程
Jun 30 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 Javascript
javascript基本语法
May 31 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
巧用数组制作图片切换js代码
Nov 29 Javascript
js以及jquery实现手风琴效果
Apr 17 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
JS中this的指向以及call、apply的作用
May 06 Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 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设计模式 State (状态模式)
2011/06/26 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
js的闭包的一个示例说明
2008/11/18 Javascript
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
jQuery列表拖动排列具体实现
2013/11/04 Javascript
javascript 数组排序函数sort和reverse使用介绍
2013/11/21 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016/05/03 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
2017/03/23 jQuery
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
微信小程序缓存过期时间的使用详情
2019/05/12 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
vue 实现超长文本截取,悬浮框提示
2020/07/29 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
对Python函数设计规范详解
2019/07/19 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
Python logging模块进行封装实现原理解析
2020/08/07 Python
python 录制系统声音的示例
2020/12/21 Python
经贸日语毕业生自荐信
2013/11/03 职场文书
公开服务承诺制度
2014/03/26 职场文书
党支部承诺书范文
2014/03/28 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
团委工作总结2015
2015/04/02 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python