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 相关文章推荐
来自qq的javascript面试题
Jul 24 Javascript
js实现网站首页图片滚动显示
Feb 04 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
Aug 06 Javascript
利用fecha进行JS日期处理
Nov 21 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
knockoutjs模板实现树形结构列表
Jul 31 Javascript
详解vue mint-ui源码解析之loadmore组件
Oct 11 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
Jan 25 Javascript
vue中img src 动态加载本地json的图片路径写法
Apr 25 Javascript
VuePress 中如何增加用户登录功能
Nov 29 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 14 Javascript
微信小程序实现点赞业务
Feb 10 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 默默经典版本
2009/08/04 PHP
php 代码优化的42条建议 推荐
2009/09/25 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
php闭包中使用use声明变量的作用域实例分析
2018/08/09 PHP
es6在react中的应用代码解析
2017/11/08 Javascript
写给小白看的JavaScript异步
2017/11/29 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
使用express获取微信小程序二维码小记
2019/05/21 Javascript
Bootstrap实现省市区三级联动(亲测可用)
2019/07/26 Javascript
javascript/jquery实现点击触发事件的方法分析
2019/11/11 jQuery
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
Python实现批量压缩图片
2018/01/25 Python
python实现定时提取实时日志程序
2018/06/22 Python
深入浅析Python2.x和3.x版本的主要区别
2018/11/30 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
Pytorch 抽取vgg各层并进行定制化处理的方法
2019/08/20 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
莫斯科制造商的廉价皮大衣:Fursk
2020/06/09 全球购物
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
编程实现去掉XML的重复结点
2014/05/28 面试题
上班早退检讨书
2014/01/09 职场文书
导游实习生自荐书
2014/01/28 职场文书
优秀工会工作者事迹材料
2014/06/02 职场文书
机关作风建设自查报告
2014/10/22 职场文书
五年级上册复习计划
2015/01/19 职场文书
入党转正介绍人意见
2015/06/03 职场文书
跑出一片天观后感
2015/06/08 职场文书
会议营销主持词
2015/07/03 职场文书
小学运动会入场口号
2015/12/24 职场文书