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


Posted in Javascript onMay 14, 2019

偶尔还是会陷入到DOM操作上面去,其实你应该关心的是数据传递,而不是操作DOM。如果你是想获取data-num的数据,可以这样写:

<span @click="getData($event,'21')">55</span>

getData:function (e,num) {
       console.log(num)
}

这样就可以取到这个值了,如果你是确实想操作DOM,那你可以这样写:

<span data-num="21" ref="dataNum" @click="getData($event)">55</span>

getData:function (e) {
    console.log(this.$refs.dataNum.dataset.num);
  }

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

2.通过e.target.getAttribute

<div id="app">
    <span data-num="21" @click="getData($event)">55</span>
  </div>
new Vue({
   el:'#app',
   methods:{
     getData:function (e) {
       console.log(e.target.getAttribute('data-num'))
     }
   }
 })

3.自定义命名

如:html 

<div class="live-dd" numId = "<{$item.id}>"></div>

js:

$('.live-dd').on("click",function(){var num = this.getAttribute('numId');location.href='/live/info?id='+num;})

使用jq的方法

<span class="vk_cq5" classid="<{$smarty.get.id}>">

var live_id = $('.vk_cq5').attr('classid')

ref的用法  相当于操作dom
html :

<div> 
  <div id="box" ref="mybox"> 
   DEMO 
  </div> 
 </div>

js:

export default {  
  data () {  
    return {  
        
    }  
  },  
  mounted () {  
    this.init();  
  },  
  methods:{  
    init() {  
      const self = this;  
      this.$refs.mybox.style.color = 'red';  
      setTimeout(() => {  
        self.$refs.mybox.style.color = 'blue';  
      },2000)  
    }  
  }  
  
}  

以上所述是小编给大家介绍的vue如何获取自定义元素属性参数值的方法详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
浅谈javascript的数据类型检测
Jul 10 Javascript
基于jquery的图片幻灯展示源码
Jul 15 Javascript
javascript中的绑定与解绑函数应用示例
Jun 24 Javascript
jquery iframe操作详细解析
Nov 20 Javascript
js 验证身份证信息有效性
Mar 28 Javascript
JavaScript函数详解
Feb 27 Javascript
jQuery实现自定义checkbox和radio样式
Jul 13 Javascript
JavaScript匿名函数之模仿块级作用域
Dec 12 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
Feb 25 Javascript
JavaScript生成验证码并实现验证功能
Sep 24 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
JS简单判断是否在微信浏览器打开的方法示例
Jan 08 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
May 14 #Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 #Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
May 14 #Javascript
fastadmin中调用js的方法
May 14 #Javascript
vue+elementUI实现表单和图片上传及验证功能示例
May 14 #Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 #Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
May 14 #Javascript
You might like
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
Sample script that deletes a SQL Server database
2007/06/16 Javascript
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
jquery中event对象属性与方法小结
2013/12/18 Javascript
Javascript 遍历页面text控件详解
2014/01/06 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
jQuery 常见小例汇总
2016/12/14 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
[05:00]TI9战队采访 - Royal Never Give Up
2019/08/20 DOTA
Python性能优化的20条建议
2014/10/25 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
关于numpy数组轴的使用详解
2019/12/05 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
python连接mongodb数据库操作数据示例
2020/11/30 Python
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
html5的canvas方法使用指南
2014/12/15 HTML / CSS
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
群胜软件Java笔试题
2012/09/29 面试题
迟到检讨书5000字
2014/01/31 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
大学感恩节活动总结
2015/05/05 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书