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 cookies 设置、读取、删除实例代码
Apr 12 Javascript
JavaScript实现自己的DOM选择器原理及代码
Mar 04 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
Mar 10 Javascript
详解AngularJS中的依赖注入机制
Jun 17 Javascript
纯CSS3代码实现滑动开关效果
Aug 19 Javascript
js判断当前页面用什么浏览器打开的方法
Jan 06 Javascript
JQuery在循环中绑定事件的问题详解
Jun 02 Javascript
Vue-cli3项目配置Vue.config.js实战记录
Jul 29 Javascript
解决vue 绑定对象内点击事件失效问题
Sep 05 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
Vue触发input选取文件点击事件操作
Aug 07 Javascript
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
使用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
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
队列在编程中的实际应用(php)
2010/09/04 PHP
php设计模式 Composite (组合模式)
2011/06/26 PHP
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
php使用正则表达式进行字符串搜索的方法
2015/03/23 PHP
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
2007/08/15 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
jQuery文本框(input textare)事件绑定方法教程
2013/04/24 Javascript
jQuery层级选择器用法分析
2015/02/10 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
2017/03/07 Javascript
vue增删改查的简单操作
2017/07/15 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
2020/02/07 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
2020/11/05 Javascript
Python用GET方法上传文件
2015/03/10 Python
Python简单连接MongoDB数据库的方法
2016/03/15 Python
Python简单生成8位随机密码的方法
2017/05/24 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
python 提取文件指定列的方法示例
2019/08/07 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
Linux内核产生并发的原因
2016/11/08 面试题
应届生幼儿园求职信
2013/11/12 职场文书
优秀员工表扬信
2014/01/17 职场文书
电大毕业自我鉴定
2014/02/03 职场文书
护士毕业生自荐信
2014/02/07 职场文书
《我不是最弱小的》教学反思
2014/02/23 职场文书
中药专业自荐信范文
2014/03/18 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
2014党员民主评议个人思想剖析发言
2014/09/19 职场文书
2019大学竞选班长发言稿
2019/06/27 职场文书
五年级作文之成长
2019/09/16 职场文书
Redis安装启动及常见数据类型
2021/04/14 Redis
centos8安装MongoDB的详细过程
2021/10/24 MongoDB
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers