vue中标签自定义属性的使用及说明

 更新时间:2023年05月11日 10:23:55   作者:dearqz  
这篇文章主要介绍了vue中标签自定义属性的使用及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue标签自定义属性使用

在 vue 中,尽量避免对dom的操作,通过对状态的管理实现需要的功能

举个例子

vue获取dom元素可以使用 ref 要想获得自定义属性,可以通过设置 ref 实现

<span data-num="21" ref="dataNum"  @click="getData">55</span>
getData:function () {
   console.log(this.$refs.dataNum.dataset.num);
}

但是vue 不推荐这样做,你可以这样做

<span  @click="getData('21')">55</span>
getData:function (num) {
   console.log(num);
}

像这样的(关于input中的属性),一般可以放到name空间里,可以通过$attr属性获取相应的值

<input ref="dataNum" name="21" :value="value1"></input>
<span @click="getData">获取name</span>
getData:function () {
   console.log(this.$refs.dataNum.$attr.name);
}

但是这样为何不直接传进去状态值呢

<input v-modle="value1"></input>
<span @click="getData('21')">获取name</span>
getData:function (num) {
   console.log(num);
}

当然操作dom还可以通过e.target操作获取,还是不推荐

<span data-num="21" @click="getData">55</span>
getData:function (e) {
   console.log(e.target.getAttribute('data-num'));
}

vue自定义属性的设置及获取

写多了小程序,再写vue,在写方法传值的时候就自然而然的就想要去使用自定义属性,既简单又方便。

小程序中设置自定义属性及获取

那么在小程序中的标签自定义属性的写法及获取如下:

小程序:

①.标签设置自定义属性
<image catchtap="guanbiFn" data-which="look" src="../images/guanbia.png" class="guanbiImg"/>
//就想这样直接用data-自定义属性名,然后赋上你所需要的值就可以
②、获取标签设置的自定义属性值
  guanbiFn(e){
          console.log("e.currentTarget.dataset.which");//look
  }
  //这样就直接获取到了

vue中设置自定义属性及获取

那么在使用vue去写项目的时候,再想用这一套明显是有点不合适的。

vue中设置动态属性是要用v-modal的,也可以简写为半角冒号":",那么也就是说我们想要设置自定义属性也还是得用这个语法才可以。

Vue:
①、标签设置自定义属性
<span :index="index" :show="item.IsShow" ref="dataSelf" @click="selectBrand" v-for="(item,index) in getChoiceData.BrandList">{{item.Name}}</span>
//看上面一行代码,有循环,循环中用了内容和下标,那么我想设置有关于下标数值和某一个内容的自定义属性,方便在方法中去使用,这就是一种方法,(当然了除了这种传值其实也可以直接形参传值的那种方法去获取也可以)。
②、获取标签设置的自定义属性值
vue获取的时候有两种方法:
      selectBrand(e) {
              //方法一:操作Dom
              console.log(this.$refs.dataSelf.dataset.index);//获取到我们循环中的下标值
              //方法二:通过e.target.getAttribute
              console.log(e.target.getAttribute('show'));//获取到循环中的IsShow的值
      }

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • Vue在echarts tooltip中添加点击事件案例详解

    Vue在echarts tooltip中添加点击事件案例详解

    本文主要介绍了Vue项目中在echarts tooltip添加点击事件的案例详解,代码具有一定的价值,感兴趣的小伙伴可以来学习一下
    2021-11-11
  • element select必填项验证回显问题的解决

    element select必填项验证回显问题的解决

    本文主要介绍了element select必填项验证回显问题的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • 浅谈vue项目如何打包扔向服务器

    浅谈vue项目如何打包扔向服务器

    本篇文章主要介绍了浅谈vue项目如何打包扔向服务器,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • vue实现文件上传

    vue实现文件上传

    这篇文章主要为大家详细介绍了vue实现文件上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 详解Vue如何手写一个虚拟列表

    详解Vue如何手写一个虚拟列表

    虚拟列表是一种优化长列表渲染的技术,它可以在保持流畅性的同时,渲染大量的数据,本文主要介绍了如何使用vue手写一个虚拟列表,感兴趣的可以了解下
    2024-04-04
  • 如何设置Vue全局公共方法

    如何设置Vue全局公共方法

    这篇文章主要介绍了如何设置Vue全局公共方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • 一篇文章带你吃透Vuex3的状态管理

    一篇文章带你吃透Vuex3的状态管理

    Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,下面这篇文章主要给大家介绍了关于如何通过一篇文章带你吃透Vuex3的状态管理,需要的朋友可以参考下
    2022-07-07
  • 第一个Vue插件从封装到发布

    第一个Vue插件从封装到发布

    这篇文章主要为大家详细介绍了第一个Vue插件从封装到发布的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • Vue Element前端应用开发之前端API接口的封装

    Vue Element前端应用开发之前端API接口的封装

    对整个系统来说,一般会有很多业务对象,而每个业务对象的API接口又有很多。我们这个VUE+Element 前端应用就是针对ABP框架的业务对象,因此前端的业务对象接口也是比较统一的,那么可以考虑在前端中对后端API接口调用进行封装,引入ES6的方式进行前端API的抽象简化。
    2021-05-05
  • vue视频播放插件vue-video-player的具体使用方法

    vue视频播放插件vue-video-player的具体使用方法

    这篇文章主要介绍了vue视频播放插件vue-video-player的具体使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11

最新评论