在Vue中获取自定义属性方法:data-id的实例

获取自定义属性的方法：

第一步：首先在标签上绑定上@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的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue如何获取自定义元素属性参数值的方法

    vue如何获取自定义元素属性参数值的方法

    偶尔还是会陷入到DOM操作上面去,其实你应该关心的是数据传递,而不是操作DOM.如果你是想获取data-num的数据,可以这样写: <span @click="getData($event,'21')">55</span> getData:function (e,num) { console.log(num) } 这样就可以取到这个值了,如果你是确实想操作DOM,那你可以这样写: <span data-num="21" ref=&quo

  • 对VUE中的对象添加属性

    背景:在通过接口获取数据集对象后,根据业务场景需要在数据集对象上增加额外的属性 data中定义的数据集对象mindData格式示例如下 mindData: [ {label:'清醒',value:'清醒'}, {label:'朦胧',value:'朦胧'}, {label:'嗜睡',value:'嗜睡'}, {label:'昏睡',value:'昏睡'}, {label:'谵妄',value:'谵妄'}, {label:'模糊',value:'模糊'}] 1) 通过post调用接口获取minDa

  • vue获取DOM元素并设置属性的两种实现方法

    这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相应的元素加ref="name" 然后再this.$refs.name获取到该元素 注意:在获取相应元素之前,必须在mount钩子进行挂载,否则获取到的值为空, 如果是给子组件加id并修改自定义属性,则直接会加载改子组件对应的外层div上,并不会改变该子组件原本的自定义属性的值 如果给子组件

  • 在Vue中获取自定义属性方法:data-id的实例

    获取自定义属性的方法: 第一步:首先在标签上绑定上@click="getDateId(item.id)",并将属性值传到绑定的事件里面 第二步:在标签上继续绑定:date-id = "item.id"属性 第三步:在<script>里面的属性methods里面添写上事件函数 getDateId(id){} 在事件函数里面获取id的值即可 <template> <h2 class="left t-title" @cli

  • 在vue中获取token,并将token写进header的方法

    需要准备的东西:Vue+axios+Vuex+Vue-router 1.在login.vue中通过发送http请求获取token //根据api接口获取token var url = this.HOST + "/session"; this.$axios.post(url, { username: this.loginForm.username, password: this.loginForm.pass }).then(res => { // console.log(res.d

  • 在Vue中获取组件声明时的name属性方法

    在实际开发中,我们可能需要拿到组件声明时创建的一些属性,比较典型的话就是name属性,在实际开发中需要定位问题时,需要找到是哪一个组件,但是我们总不可能写代码的时候去先找到组件的name属性,然后复制粘贴,作为参数传给函数吧. 例如: catchError('componentsName', 'errorDescription') 太傻了. 解决办法,获取到组件的this,然后利用this去拿到组件的name属性,这样的话,代码就可以这么写: catchError.call(this, 'err

  • Vue中的this.$options.data()和this.$data用法说明

    问题 项目里遇到一个问题,用this.$options.data()重置组件data时,data()里用this获取的props或method都为undefined,代码简化如下: export default { props: { P: Object }, data () { return { A: { a: this.methodA }, B: this.P }; }, methods: { resetData () { // 更新时调用 Object.assign(this.$data,

  • 在Vue 中获取下拉框的文本及选项值操作

    方法1: <!-- element表单组件 --> <el-form :model="ruleForm" label-position="right" ref="ruleForm" // 被ref 标记的 status-icon size="small" inline :rules="rules" label-width="150px" class="demo

  • 在vue中获取wangeditor的html和text的操作

    目的:vue 中获取 wangeditor 的 html 和 text. 补充知识:vue-cli webpack 引入 wangeditor(轻量级富文本框) 1:使用npm下载: //(注意 wangeditor 全部是小写字母) npm install wangeditor 2: 直接在项目模板中引用 import E from 'wangeditor' 3:HTML <div id="editorElem" style="text-align:left"

  • layui select获取自定义属性方法

    在layui里面给了特定几个自定义属性title <select name="aa" lay-filter="sadaS"> <option value="">请选择属性</option> <option value="1" title="12.32">雪碧</option> <option value="2" title

  • vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)

    mounted() { // 在mounted中监听表格scroll事件 this.$refs.scrollTable.addEventListener( 'scroll',(event) => { this.adjustTable(event); }); }, ...... // target中的属性很多,可以通过控制台查看--clientWidth可以获取除滚动条外的可视区域宽度 adjustTable(event) { this.clientWidth = event.target.cli

  • Vue 中获取当前时间并实时刷新的实现代码

    1. 实现代码 <template> <div> {{nowDate}}{{nowWeek}}{{nowTime}} </div> </template> <script> export default { data(){ return { nowDate: "", // 当前日期 nowTime: "", // 当前时间 nowWeek: "" // 当前星期 } }, methods

  • 浅谈vue中computed属性对data属性赋值为undefined的原因

    浅谈vue中computed属性对data属性赋值为undefined的原因

    目录 场景: 原因: _init中初始化 _init中做了什么? 在initState()做了这些事情 解决办法: 场景: 我在computed中return了一个值,然后在data中直接将它复制给另一个属性.结果data中的属性值为undefined… 代码示例: timer为undefined… 原因: 在这里很容易想到是执行顺序的问题,computed中的属性和data中的属性最终都会加载到app这个实例下.如果data中的实例属性被创建完成的时候,computed中的实例属性还没被创建,

随机推荐