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.js轻量高效的前端组件化方案

    深入理解Vue.js轻量高效的前端组件化方案

    这篇文章主要介绍了深入理解Vue.js轻量高效的前端组件化方案 ,需要的朋友可以参考下
    2018-12-12
  • vue3组合式api创建单文件组件的写法

    vue3组合式api创建单文件组件的写法

    Vue3 中的 Composition API 是一种新的编写组件逻辑的方式,它提供了更好的代码组织、类型推导、测试支持和复用性,本文为大家介绍了vue3利用组合式api创建单文件组件的方法,感兴趣的可以了解下
    2023-08-08
  • 浅谈vue中关于checkbox数据绑定v-model指令的个人理解

    浅谈vue中关于checkbox数据绑定v-model指令的个人理解

    这篇文章主要介绍了浅谈vue中关于checkbox数据绑定v-model指令的个人理解,v-model用于表单的数据绑定很常见,下面就来详细的介绍一下
    2018-11-11
  • vue 实现websocket发送消息并实时接收消息

    vue 实现websocket发送消息并实时接收消息

    这篇文章主要介绍了vue 实现websocket发送消息并实时接收消息,项目结合vue脚手架和websocket来搭建,本文给大家分享实例代码,需要的朋友可以参考下
    2019-12-12
  • vue前后分离调起微信支付

    vue前后分离调起微信支付

    这篇文章主要为大家详细介绍了vue前后分离调起微信支付,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • 详解基于vue-cli配置移动端自适应

    详解基于vue-cli配置移动端自适应

    本篇文章主要介绍了详解基于vue-cli配置移动端自适应,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • vue中v-for 循环对象中的属性

    vue中v-for 循环对象中的属性

    这篇文章主要介绍了 vue中v-for 循环对象中的属性,文章围绕v-for 循环对象的相关资料展开详细内容,需要的朋友可以参考一下,希望对大家有所帮助
    2021-11-11
  • Vue中计算属性和监听属性及数据的响应式更新和依赖收集基本原理讲解

    Vue中计算属性和监听属性及数据的响应式更新和依赖收集基本原理讲解

    computed是vue的配置选项,它的值是一个对象,其中可定义多个计算属性,每个计算属性就是一个函数,下面这篇文章主要给大家介绍了关于vue中计算属性computed的详细讲解,需要的朋友可以参考下
    2023-03-03
  • 关于vue3.0使用axios报错问题

    关于vue3.0使用axios报错问题

    这篇文章主要介绍了vue3.0使用axios报错问题记录,vue-cli3.0安装插件的时候要注意区分vue-cli2.0的命令,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • vue中mixins的工具的封装方式

    vue中mixins的工具的封装方式

    这篇文章主要介绍了vue中mixins的工具的封装方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05

最新评论