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

黄凯鹏

vue标签自定义属性使用

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

举个例子

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

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

复制代码

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

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

复制代码

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

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

复制代码

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

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

复制代码

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

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

复制代码

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

写多了小程序，再写vue，在写方法传值的时候就自然而然的就想要去使用自定义属性，既简单又方便。
小程序中设置自定义属性及获取
那么在小程序中的标签自定义属性的写法及获取如下：
小程序：

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

复制代码

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

那么在使用vue去写项目的时候，再想用这一套明显是有点不合适的。
vue中设置动态属性是要用v-modal的，也可以简写为半角冒号":"，那么也就是说我们想要设置自定义属性也还是得用这个语法才可以。

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

复制代码

总结

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

来源:https://www.jb51.net/article/284014.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！