vue 给标签添加data属性_在Vue中获取自定义属性方法:data-id的实例
获取自定义属性的方法:
第一步:首先在标签上绑定上@click="getDateId(item.id)",并将属性值传到绑定的事件里面
第二步:在标签上继续绑定:date-id = "item.id"属性
第三步:在
methods: {
getDataId(id) {
console.log(id);
}
},
补充知识: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的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持云海天教程。
原文链接:https://blog.csdn.net/qq_44472790/article/details/90273766
vue 给标签添加data属性_在Vue中获取自定义属性方法:data-id的实例相关推荐
- python获取类的类属性_在python中获取类和实例的属性
在Python中工作下一个代码: class MyClass(object): field = 1 >>> MyClass.field 1 >>> MyClass( ...
- vue-quill-editor 自定义 img 标签,给标签添加 href 属性
vue-quill-editor 自定义 img 标签,给标签添加 href 属性 需求:上传图片成功之后,给图片标签插入 href 属性,内容为自定义的一段字符串,格式大概如下:<img sr ...
- jQuery 自动给a标签添加target属性
本文档为个人博客文档系统的备份版本.作者:小游.作者博客:点击访问 代码如下 //自动给a标签添加target属性 $("a").attr({rel:"noopener& ...
- js给对象添加变量属性 js 更改对象中的属性名 数组对象中每个对象添加一个字段-map用法和forEarch用法
js给对象添加变量属性 & js 更改对象中的属性名 & 数组对象中每个对象添加一个字段-map用法和forEarch用法 1.js给对象添加变量属性 1.js创建一个对象或者在原有对 ...
- vue 给标签添加data属性_vue之data属性
培训代码 在new Vue()的时候,是可以给data直接赋值为一个对象的. 但是在组件中,data必须是一个函数,注册组件其实并不产生新的组件类,但会产生一个可以用来实例化的新方式. 因为可能在多处 ...
- react 动态添加组件属性_这么高质量React面试题(含答案),看到就是赚到了!...
前言 本文篇幅较长,全是干货,建议亲们可以先收藏慢慢看哦 写文不易,欢迎大家一起交流,喜欢文章记得关注我点个赞哟,感谢支持! Q1 :什么是虚拟DOM? 难度::star: 虚拟DOM(VDOM)它是 ...
- vue 给取data值_一些Vue相关的面试题,帮助求职者提升竞争力
Vue是一套构建用户界面的渐进式框架,具有简单易用.性能好.前后端分离等优势,是Web前端工程师工作的好帮手,也是企业选拔人才时考察的重点技能.接下来我就给大家分享一些Vue相关的面试题,帮助大家提升 ...
- dede php 里加nofollow,WordPress为标签添加nofollow属性
这个功能一般很少用到,很多人都认为Wordpress的标签可以增加网站的收录数量,但是负面效果也是有的,相信有很多人跟我一样用tag标签作为文章的关键词来使用,那么就避免不了一个问题就是tag标签越来 ...
- 微信小程序和vue双向绑定哪里不一样_浅析Vue 和微信小程序的区别、比较
写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别. 一.生命周期 先贴两张图: vue生命周期 小程序生命周期 相比之下,小程序的钩子函数要简单得多. vue的钩子函数 ...
最新文章
- 点击量终于突破十万大关,以示庆贺,耶!!!
- ReactOS 架构
- ciaodvd数据集的简单介绍_基于注意力机制的规范化矩阵分解推荐算法
- 什么都不说,来4波js
- [导入]使用SqlCommand对象执行存储过程
- 2014年国内最热门的.NET开源项目TOP25
- SpringMVC文件上传(三)异常栈处理
- 最大乘积java_在Java中查找负数的最大乘积
- 4755. 快速荷叶叶变换
- 一名全栈工程师的必备工具箱
- 月圆之夜,更新了一下1024客户端【强烈推荐更新】
- 2021年PMP考试模拟题2(含答案)
- 基于ZigBee的城市照明监控系统网关节点的软硬件设计
- cannot set options after executing query
- 计算机中的原码、反码和补码计算
- 树莓派4B监控CPU占用率、内存使用率、磁盘使用量以及CPU温度
- 自兴人工智能——Python第二课(列表和元组)
- Spectral Core Crack,Spectral Core尽快创建数据库副本
- 加密视频(java加密视频)
- 谷歌外链建设2022年如何判断和购买google优质外链
热门文章
- C# Winform控件对透明图片重叠时导致图片不透明的解决方法
- 【解决方案】SpringCloud项目优雅发版、部署
- 【报告分享】预见2021-罗兰贝格中国行业趋势报告.pdf(附下载链接)
- 【白皮书分享】站外种草白皮书.pdf(附下载链接)
- 比特币的双花和51%算力攻击
- 剑指offer 面试题62. 圆圈中最后剩下的数字
- 点击率预估与冷启动(二)
- Leetcode每日一题:141.linked-list-cycle(环形链表)
- 吴恩达机器学习练习4:神经网络学习(损失函数和正则化)
- 字符编码:ASCII、Unicode、UTF-8和字节序