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 相关文章推荐
cnblogs csdn 代码运行框实现代码
Nov 02 Javascript
Pro JavaScript Techniques学习笔记
Dec 28 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
jQuery统计上传文件大小的方法
Jan 24 Javascript
javascript实现实时输出当前的时间
Apr 27 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
Jun 01 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
Angular2 多级注入器详解及实例
Oct 30 Javascript
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
详解如何为你的angular app构建一个第三方库
Dec 07 Javascript
Node实现搜索框进行模糊查询
Jun 28 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实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
php限制ip地址范围的方法
2015/03/31 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
JavaScript 加号(+)运算符号
2009/12/06 Javascript
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
js时间日期和毫秒的相互转换
2013/02/22 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
javascript实现考勤日历功能
2018/11/29 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
2019/05/21 Javascript
JavaScript实现更换背景图片
2019/10/18 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
python图片二值化提高识别率代码实例
2019/08/24 Python
python获取引用对象的个数方式
2019/12/20 Python
python3将变量输入的简单实例
2020/08/19 Python
Pycharm plot独立窗口显示的操作
2020/12/11 Python
Python 多进程原理及实现
2020/12/21 Python
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
音乐教学随笔感言
2014/02/19 职场文书
绩效工资实施方案
2014/03/15 职场文书
优秀学生干部个人事迹材料
2014/06/02 职场文书
公证委托书标准格式
2014/09/11 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
离职报告范文
2014/11/04 职场文书
2015年校长新年寄语
2014/12/08 职场文书
导游词之镇江焦山
2019/11/21 职场文书
mysql函数全面总结
2021/11/11 MySQL