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的值
      }

总结

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

相关文章

  • import.meta.glob() 如何导入多个目录下的资源(最新推荐)

    import.meta.glob() 如何导入多个目录下的资源(最新推荐)

    import.meta.glob() 其实不仅能接收一个字符串,还可以接收一个字符串数组,就是匹配多个位置,本文给大家介绍import.meta.glob() 如何导入多个目录下的资源,感兴趣的朋友一起看看吧
    2023-11-11
  • vue3+ts+EsLint+Prettier规范代码的方法实现

    vue3+ts+EsLint+Prettier规范代码的方法实现

    本文主要介绍在Vue3中使用TypeScript做开发时,如何安装与配置EsLint和Prettier,以提高编码规范。感兴趣的可以了解一下
    2021-10-10
  • Vue绘制双Y轴折线柱状图

    Vue绘制双Y轴折线柱状图

    这篇文章主要介绍了Vue绘制双Y轴折线柱状图实例,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • vue实现在v-html的html字符串中绑定事件

    vue实现在v-html的html字符串中绑定事件

    今天小编就为大家分享一篇vue实现在v-html的html字符串中绑定事件,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Vue2.0脚手架搭建

    Vue2.0脚手架搭建

    这篇文章介绍了使用vue-cli搭建脚手架的方法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-03-03
  • 详谈vue中的rules表单验证(常用)

    详谈vue中的rules表单验证(常用)

    这篇文章主要介绍了关于vue中的rules表单验证(常用),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • Vue3中如何自定义双向绑定

    Vue3中如何自定义双向绑定

    这篇文章主要介绍了Vue3中如何自定义双向绑定问题,具有很好的参考价价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • 解决vue3使用element-ui的具体操作

    解决vue3使用element-ui的具体操作

    elmentui是一款为vue设计的桌面组件库,下面这篇文章主要给大家介绍了关于解决vue3使用element-ui的具体操作,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • vue中调接口的方式详解this.$api、直接调用、axios

    vue中调接口的方式详解this.$api、直接调用、axios

    这篇文章主要介绍了vue中调接口的方式:this.$api、直接调用、axios,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-11-11
  • vue写一个组件

    vue写一个组件

    这篇文章主要介绍了vue组写一个组件,需要的朋友可以参考下
    2018-04-04

最新评论