在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 相关文章推荐
超级有用的13个基于jQuery的内容滚动插件和教程
Jul 31 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
JS仿Base.js实现的继承示例
Apr 07 Javascript
vue轮播图插件vue-awesome-swiper
Nov 27 Javascript
mongoose更新对象的两种方法示例比较
Dec 19 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 Javascript
vue 实现强制类型转换 数字类型转为字符串
Nov 07 Javascript
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
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
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
jQuery select操作控制方法小结
2010/05/26 Javascript
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
ReactNative之FlatList的具体使用方法
2017/11/29 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
解决vant-UI库修改样式无效的问题
2020/11/03 Javascript
Python爬虫模拟登录带验证码网站
2016/01/22 Python
Django中create和save方法的不同
2019/08/13 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
Python 如何展开嵌套的序列
2020/08/01 Python
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
Vero Moda西班牙官方购物网站:丹麦BESTSELLER旗下知名女装品牌
2018/04/27 全球购物
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
师范生教师实习自我鉴定
2013/09/27 职场文书
自主实习接收函
2014/01/13 职场文书
普罗米修斯教学反思
2014/02/06 职场文书
教师开学感言
2014/02/14 职场文书
网络营销策划方案
2014/06/04 职场文书
质量安全标语
2014/06/07 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
PHP实现rar解压读取扩展包小结
2021/06/03 PHP
详解NodeJS模块化
2021/06/15 NodeJs
Vue深入理解插槽slot的使用
2022/08/05 Vue.js