关于自定义的data-*属性有时候取不到值的问题

最新推荐文章于 2024-09-16 22:50:55 发布
最新推荐文章于 2024-09-16 22:50:55 发布
阅读量2.9k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： js+html 文章标签： html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Young_Gao/article/details/78040619
本文探讨了H5自定义属性data-*在实际应用中的一个特殊案例。作者发现部分data-*属性通过this.dataset方式无法正确获取值，而使用jQuery的$(this).attr()方法则可以成功获取所有属性值。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天试了一下H5里面的自定义属性 data-* 方法，碰到一个比较奇怪的问题，那就是我的自定义属性有的能取到值，有的取不到

首先给大家看一下我定义 data-* 属性的代码

<li id="a" data-testid="123456" data-testname="name1" data-testtime="1111" data-testcount="11" >

在代码的另一个地方我需要用到这几个属性的值

于是我在这个 li 标签的点击事件中用来这种写法

this.dataset.count

前几个  testid,testname,testtime 都可以取到值，但是最后一个 testcount 就是取不到，得到的结果是 undefined

于是我改用了下面这种方式

jQuery 是必须的

然后

$(this).attr("data-testcount")

测试，可以取到值了












HTML5数据存储方案data-*与jQuery数据存储方案$.data()的区别
aty
12-16 5060
至此：jQuery数据缓存和HTML5 data-*属性介绍完毕，简单总结下比较关键的几点： 1.jQuery读取data-*会自动做数据类型转换，如果不想要这种转换只能使用attr()去获取原始的属性值。 2.jQuery读取data-*属性是懒惰的、按需的，只有真正使用这些属性的时候，jQuery才会将其加载到内存。 3.jQuery修改属性值，都是在内存中进行的，并不会修改 DOM。 4.data-*会被jQuery绑定到HTMLElement对象上，而不是jQuery封装后的对象上。
vue+vuetify表格控件v-data-table使用自定义列渲染
feinifi的博客
10-20 4797
这里先说明一下vue项目中使用vuetify框架进行整合的办法： 1、加入依赖 npm install vuetify --save 2、加入开发依赖 npm install sass sass-loader deepmerge --save-dev 3、在webpack.base.config.js中加入如下配置： module.exports = { module: rules:[ { test: /\.s(c|a)ss$/, us...
data-自定义属性取值失败的问题
小鹿不在林间的博客
07-25 746
data-属性获取值注意事项
关于自定义的data-*属性有时候取不到值的问题 2
Young_Gao的博客
09-20 1499
之前写了一个关于这个问题的文章 当时也是取不到自定义属性的值 然后用  $(this).attr("data-testcount") 成功获取到值 这次要说的则是写法上的的问题 简单来说就是  data-  后面跟的单词不能够大写字母  （excuse me???） 不知道是偶然还是就是这样的规范 当我发现我原本取不到的值换成小写字母后居然可以取到了 一瞬间我是想‘’哔‘
解决事件委托，无法获取该元素的自定义属性值问题
qq_42115928的博客
04-30 1058
首先在从数据库查数据并显示的过程中，把删除按钮设置了一个自定义属性data-id，其值等于对应的商品id。 在写删除事件时，用事件委托的形式为该元素添加点击事件，并需要获取其 data-id 的值 代码如下： $(’#tbody’).on(‘click’,’.del_shop’,()=>{ let cart_id = $(this).attr(‘data_id’); console.log...
vue data有值，但是页面{{}} 取不到值
风雨断肠草的博客
12-25 9178
我的问题出在js引入的顺序不对，导致不能正常显示vue中的值 正确的顺序应该是：先引入vue的js--------html代码-----最后引入自己写的js
使用jquery的data()方法获取不到自定义属性的值
weixin_44450506的博客
11-04 2530
在网站写获取功能的时候，发现在某个页面获取不到自定义的data的属性值，其它的页面都没有问题，但是那个页面获取的内容为undefined，经过排查发现，当时用的是jq的1.3版本，原来是因为jq的版本问题，data()是1.4.0后版本的方法 <a href="" class="regBtn" data-btn="1">点击</a> <a href="" class="regBtn" data-btn="2">点击</a> <a href="" cl
HTML5自定义属性的问题分析
12-14
另外data-id="1"最好不要用驼峰命名如：data-Id="1" ，这样有时候也取不到值。 HTML5 自定义属性 网站中经常会看到以data-开头的属性定义,虽然W3C不认定,但最新HTML5规定data-是合理的,在HTML5中,任何
HTML标签中自定义data属性的使用
qq_50646256的博客
01-25 1184
在实际开发中，有时候传输过来的数据需要在前端渲染的时候进行储存，那么这个时候就可以使用到HTML5中新增的data-自定义属性来存储需要的数据 例如这个标签中就利用自定义标签存储了需要的信息 <span class="float_left main_ul_span blue_hover" id="test" data-exam-id="AAA" onclick="check_exam(this.dataset.examId)">{{exam.name}}</span> 获取这个自定
【愚公系列】《微信小程序与云开发从入门到实践》030-关于自定义组件的高级用法
热门推荐
时光隧道
09-16 5万+
在微信小程序的开发中，自定义组件是实现灵活、可复用代码的重要工具。随着小程序生态的不断发展，开发者对于组件的需求也日益增长，从基础的组件使用到高级的技巧与模式，掌握自定义组件的高级用法已成为提升开发效率和用户体验的关键所在。本文将深入探讨微信小程序中自定义组件的高级用法，包括组件之间的通信、生命周期管理、插槽机制、样式封装等内容。我们将通过实际案例和最佳实践，帮助您更好地理解和应用这些高级功能，从而为您的项目带来更高的灵活性和可维护性。
Jfinal框架写了getter、setter方法后，还是无法获取到自定义属性的问题（已解决）
yuanchangliang的博客
08-04 522
在Jfianl框架中，前端默认是只能够获取到数据库中的字段的，而我们在实体类中额外添加的的字段，就算是写了getter，setter方法，在后端debug可以看到数据，但是传到前端后，却仍旧只能够看到返回了数据库中定义的字段。 这对于习惯了Spring系列框架的开发者来说，是完全无法理解的。这也是这个框架没落的原因之一吧。 想要前端能够看到我们自定义的属性，需要在自定义字段所在的实体类中重写_getAttrs方法，如下： @Override protected Map<String, Object&g
动态添加 data 属性的时候 发现某一个值无法取到
南极达殇
05-19 783
动态添加 data 属性的时候 发现某一个值无法取到data-codes$table.append(‘’ + ‘‘+n.material_id+’/’+n.name+’’ + ‘‘+n.category+’/’+n.store_condition+’’ + ‘‘+n.tzhyxsl+’/’+n.sxsl+’’ + ‘‘);后来发现 如果使用的是驼峰命名法的话
由jquery缓存引发的一桩血案，data()无法取到data-*正确值
KevinHades的博客
01-26 5367
今天在应用中遇到一个非常奇怪的问题，实际上我的应用就是将点击table中的formatter中的操作时将rowid传入模态框modal中的保存按键button的data-id属性字段，实现如下 如下的效果， 在点击modal中的保存按钮时，onclick事件saveAuthMenu（this）将this传入function中 （如上图所示）， 在function中用jquery的...
自定义属性data-xxx获取不到值 是因为不能是用大写字母
weixin_35704268的博客
09-02 246
获取不到值 是因为 ：不能使用大写字母 <span class="itemActive" data-itemid="1">1集</span>//可以 <span class="itemActive" data-itemID="1">1集</span>//不可以 console.log($(".itemActive").data("itemid")) // 1 console.log($(".itemActive").data("itemID"..
原生小程序 data- 传值的坑，取不到值
weixin_43951592的博客
11-11 628
原生小程序
Jquert data方法获取不到数据，显示为undefined。
weixin_30646505的博客
09-03 473
在使用jquery的data-xxxx自定义属性名使用小写 　　以下是我测试代码： 　　 结果显示Undefined 现在将“data-Name”变为“data-name”,将大写的部分全部变为小写。 可以获取到数据 结果： 下面再给大家一些链接关于jquery的attr,data和prop的区别，由于别人写的挺详细的我这边就不再写了。 http://www.cnblo...
关于data()获取不到得原因
weixin_30740581的博客
03-23 629
。。原因很简单,版本高低问题 从jQuery1.4.3起，HTML5data-属性将自动被引用到jQuery的数据对象中。 所以,还是尽量保持用attr来获取自定义属性 转载于:https://www.cnblogs.com/ncellit/p/6604077.html...
小程序res.data获取不到data下面的值 （序列化问题）
hsuan_优快云的博客
04-17 1万+
当success(res)执行成功之后，能在控制台获取到res有哪些值。但是往下获取却没有值了 解决方案 转json就能解决啦！
Vue中在定时任务里修改data中的值页面无反应
liulang1905的博客
05-18 1147
先看下问题代码 setInterval(function(){ this.navLeftWidth--; console.log('this.navLeftWidth ',this.navLeftWidth); }, 1000); 后度娘后找的问题说是 this指向问题，如果用我这种古老的function写法会指向widow，所以肯定是找不到data里的数据了，可以改成 es6的箭头函数后就没问题了，也可以使用一个 that = this 这样将this保存下来
如何自定义v-model:file-list里边的值
最新发布
03-14
<think>好的，我现在需要帮助用户解决在Vue.js中自定义v-model的file-list值的问题。首先，我要回忆一下Vue.js中v-model的工作原理。v-model本质上是一个语法糖，它结合了value属性和input事件的监听。默认情况下，v-model会绑定组件的value属性，并在input事件触发时更新数据。 但用户提到的是自定义file-list的值，这可能涉及到文件上传组件，比如使用Element UI的el-upload组件，它通常使用file-list属性来绑定上传的文件列表。这时候用户可能想要通过v-model来双向绑定这个file-list，而不是使用单独的prop和事件。 根据Vue的文档，如果需要自定义v-model绑定的属性和事件，可以在子组件中定义model选项。例如，指定prop为fileList，事件为change。这样父组件使用v-model时，实际上绑定的就是fileList属性，并在change事件发生时更新。 接下来，我需要考虑如何在子组件中正确设置model选项。子组件应该接收fileList作为prop，然后在文件列表变化时触发change事件，并传递新的值。这样父组件通过v-model就能双向绑定fileList了。 另外，用户可能在使用第三方组件如el-upload时遇到问题，因为这些组件可能有自己的prop和事件。这时候需要确保在子组件中正确地将file-list和事件（如update:file-list）暴露出来，以便在父组件中使用v-model绑定。 还有一个需要注意的地方是，Vue 2和Vue 3在自定义v-model上有所不同。Vue 2默认使用value和input，而Vue 3可以使用多个v-model绑定，并且默认使用modelValue和update:modelValue。但用户的问题可能集中在Vue 2，因为引用的资料提到了Vue.set方法，这在Vue 2中常见。 可能还需要提到使用.sync修饰符，这在Vue 2中用于双向绑定多个prop，但在Vue 3中已被v-model的参数所取代。不过用户的问题主要在于自定义单个v-model，所以重点还是放在model选项上。 最后，我应该给出一个具体的示例，展示子组件如何定义model选项，以及父组件如何使用v-model绑定fileList。同时提醒用户注意在更新文件列表时使用Vue.set或数组的变异方法，以确保响应式更新，特别是在Vue 2中，直接修改数组可能不会触发视图更新。 总结步骤： 1. 在子组件中使用model选项指定prop和事件。 2. 在子组件中通过watch或事件监听文件列表的变化，触发相应的事件。 3. 父组件使用v-model绑定fileList。 4. 处理文件更新时确保响应式系统的检测，可能需要使用Vue.set或替换整个数组。</think>在Vue.js中自定义组件的$v-model$绑定$file-list$值，需通过以下步骤实现： ### 一、组件双向绑定原理 Vue的$v-model$本质是语法糖，默认绑定组件的$value$属性和$input$事件[^1]。对于文件列表等特殊场景，需通过$model$配置项自定义绑定属性： ```javascript // 子组件配置 export default { model: { prop: 'fileList', // 指定绑定的属性名 event: 'change' // 指定触发事件 }, props: { fileList: { // 声明接收的prop type: Array, default: () => [] } } } ``` ### 二、文件列表更新实现 在文件上传组件中，需要监听文件变化并触发更新事件： ```javascript // 子组件方法 methods: { handleFileChange(newFiles) { this.$emit('change', [...this.fileList, ...newFiles]) // 触发事件更新 } } ``` ### 三、父组件使用示例 ```html <!-- 父组件模板 --> <file-uploader v-model="currentFileList"></file-uploader> ``` ### 四、响应式更新注意事项 当操作数组时，应使用下列方法保证响应性： ```javascript // 正确方式 this.$set(this.fileList, index, newFile) // 或 this.fileList = [...this.fileList, newFile] ``` ### 五、第三方组件封装示例（以Element UI为例） ```html <template> <el-upload :file-list="innerFileList" @change="handleChange"> </el-upload> </template> <script> export default { model: { prop: 'fileList', event: 'update' }, props: ['fileList'], data() { return { innerFileList: [...this.fileList] } }, watch: { fileList(newVal) { this.innerFileList = [...newVal] } }, methods: { handleChange(file, fileList) { this.$emit('update', [...fileList]) } } } </script> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值