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'));
}

转载地址：https://blog.csdn.net/weixin_42204698/article/details/100043252

vue中标签自定义属性的使用相关推荐

vue 给标签添加data属性_在Vue中获取自定义属性方法:data-id的实例
获取自定义属性的方法: 第一步:首先在标签上绑定上@click="getDateId(item.id)",并将属性值传到绑定的事件里面第二步:在标签上继续绑定:date-id = ...
vue设置标签自定义属性_Vue组件化开发之插槽
插槽为组件提供了强大的扩展能力.我们可以把电脑的主板理解为一个已经封装好的组件,主板上都会预留各种插槽,我们可以往插槽中插入内存条.显卡.声卡等设备.基于同样的思想,Vue在封装组件时,也可以预留插槽 ...
html自定义属性冒号,vue中标签上的属性加冒号与不加冒号的区别
今天vue的项目中,因为很多结构一样的条目,所以想到了使用循环.但是问题来了,每个条目的图标不一样,这就需要在循环中依次添加不同的字体图标的类名.直接使用class来操作,结果没有报错,但是图标也没有 ...
vue中img标签404错误处理事件onerror
以下为图片链接失效的情况若服务上的图片直接在浏览器上可以打开,但是在img上报404错误处理方法在index.html中添加代码如下 <meta name="referrer&qu ...
vue中img标签onerror事件
vue中img标签onerror事件使用:onerror去绑定事件该方法能正确处理onerror事件,并防止闪图 <img type="image/x-icon" :sr ...
.vue文件转换成html,在vue中把含有html标签转为html渲染页面的实例
在vue中把含有html标签转为html渲染页面的实例在标签内部添加v-html指令即可使用pug的写法: 这个content表示的是一个含标签的变量输入content为: 我是p标签输出结果 ...
vue中处理后台返回的 html 特殊标签(‘\lt； p style=“xxx“ \gt；‘)或(\＜p＞)的三种情况及传给后端数据的解决方案
问题一:vue中处理后台返回的 html 特殊标签('&lt: p style="xxx" &gt:')或(\<p>)的三种情况返回数据 // 返回数 ...
Vanilla JavaScript 和 Vue 中的 HTML ＜template＞标签
HTML Template Tag in Vanilla JavaScript and Vue - DEV Communityhttps://dev.to/therealdanvega/html-te ...
php 正则匹配img标签中的自定义属性值
php 正则匹配img标签中的自定义属性值将原始的字符串正则匹配替换成指定的字符串类型如以下的字符串: $str="<p>张三去吃饭喝酒</p><p> ...

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

vue中标签自定义属性的使用相关推荐

最新文章

热门文章