vue @click 获取 html5 data-属性

最新推荐文章于 2024-06-14 11:31:16 发布

webhyx

最新推荐文章于 2024-06-14 11:31:16 发布

阅读量1.1k

点赞数 1

分类专栏： html 文章标签： html5

本文链接：https://blog.csdn.net/Javavison/article/details/119702826

版权

本文介绍了如何在 Vue.js 应用中利用 `@click` 事件结合 HTML5 的 `data-*` 属性来存储和获取元素数据。强调了 `data-*` 属性的灵活性，但指出在 Vue 中直接使用对象作为数据会导致 `[object Object]` 的显示。建议使用 `dataset` 属性来访问这些自定义属性，并提供了 `$event.srcElement.dataset` 的用法示例。

摘要由CSDN通过智能技术生成

使用data- * 属性可以为不同的标签存储数据。

特性：

一个元素可以有任意数量的 data 属性。
data-* = “” 在vue中使用时，不可以存对象类型属性否则会直接输出[object object]，如果一定要使用对象，将对象序列化
data-id 获取数据： $ event.srcElement.dataset.id

  <div class="test">
    <!--  event对象只在事件发生的过程中才有效 -->
    <h2 @click&

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

webhyx

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

dataset的使用(结合vue使用碰到了坑)

m0_51431448的博客

12-23

5231

在HTML5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放。 <div data-id="test">test</div> 这里的data-前缀就被称为data属性;我们可以通过dataset来获取data属性。下面是两个例子：例1： <body> <div id="div1" data-index="0" data-a="牛啊牛啊">test1</div> <div id="div2" .

click 获取数据data-*_vue实现后端获取数据

weixin_39796140的博客

02-03

1295

终于，在前辈的指导和自己的摸索下，终于实现的对于后端数据的获取以及对于数据传至表格，下面和大家简述一下流程：一、在页面实现获取操作：_serverMenus() { serverMenus() .then((res) => {if(res.message.code===0){//若message.code===0，则进行赋值 ...

参与评论您还未登录，请先登录后发表或查看评论

【Vue-day1】Vue获取Html标签中的值

m0_57450589的博客

03-03

7262

方法1：在自定义函数中加上$event，在js函数中可以获取到点击事件的标签，从而获取对应标签的值，易于分离。 Html代码： <a href="javascript:;" @click="getCity($event)">北京</a> Js代码： getCity:function(event){ console.log(event.target.innerHTML); } 方法2：vue的ref和$refs方法（在Js中test不知道如何分离多...

vue中使用和操作H5的data-xxxx属性

沧笙踏歌的博客

03-30

1715

资料 H5中data-xxxx属性. 基本使用注意这里的navFirst($event),只能写$event,写别的都获取不到 <div class="header-nav-item" data-num="6" @mouseenter="navFirst($event)" @mouseleave="navReset" > 技能培训 ...

Vue项目中，使用H5新增datalist标签

Hello World

08-03

916

Vue项目中，使用H5新增datalist标签

如何在Vue中获取自定义属性方法：data-id

u010227042的博客

11-13

4783

获取自定义属性的方法：第一步：首先在标签上绑定上@click="changeCheckBox（item.id）",并将属性值传到绑定的事件里面第二步：在标签上继续绑定：date-id = "item.id"属性第三步：在<script>里面的属性methods里面添写上事件函数 changeCheckBox(id){} 在事件函数里面获取id的值即可 <div class...

在Vue中获取自定义属性方法:data-id的实例

10-14

总结，Vue中获取自定义属性`data-id`的方法是通过事件监听器和属性绑定，结合`methods`中的函数来实现。同时，我们可以利用`localStorage`进行数据存储，通过解析URL获取参数，以及使用Vue Router进行页面导航和标题...

vue 给取data值_在Vue中获取自定义属性方法:data-id的实例

weixin_39939601的博客

12-20

3799

获取自定义属性的方法：第一步：首先在标签上绑定上@click="getDateId(item.id)",并将属性值传到绑定的事件里面第二步：在标签上继续绑定：date-id = "item.id"属性第三步：在里面的属性methods里面添写上事件函数 getDateId(id){} 在事件函数里面获取id的值即可methods: {getDataId(id) {console.log(id);}...

vue @click 多个事件_vue基础之基本指令以及使用

weixin_39520199的博客

11-20

879

day01Vue 是什么？Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合指令本质就是自定义属性Vue中指定都是以 v- 开头 v-cloak防止页面加载时出现闪烁问题v-textv-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题如果数据中有HTML标签会将ht...

解决v-html代码中添加@click点击事件不生效问题

热门推荐

wangchaohpu的博客

11-27

16万+

1、绑定监听@click:（以监听click为例，其他如keyup，用法类似） v-on:click="fun" @click="fun" @click="fun(参数)" <button @click="test1">test1</button> <button @click="test2('abc')"&

vue中@click(function())中function接受来自data中返回的值

Major_S的博客

03-28

1795

vue中@click(function())中function接受来自data中返回的值vue中@click(function())中function接受来自data中返回的值vue中@click(function())中function接受来自data中返回的值 @click="Video(dataset.introduction_video_url)" <el-col :span="8"> <div class="content"> <h1 s

解决在html中给button按钮添加了@click事件控制v-if或者v-show无效的问题

方方方的博客

05-27

4249

解决在html中给button按钮添加了@click事件控制v-if或者v-show无效的问题在项目开发中，要实现点击一个按钮控制某个div显示或者隐藏的情景。主要思路为结合vue，为div添加v-if或者v-show，然后为按钮添加点击事件，控制v-if或者v-show的值。主要代码如下： //HTML中代码 <div id="app"> <div v-if="isShow"> 要显示和隐藏的内容 </div> <bu

e.target.dataset与e.currentTarget.dataset获取不到定义的值

我的第一篇文章

12-12

3337

在某元素上面用data-*绑定了某个属性，取值使用event.currentTarget.dataset.*。但是event有target和currentTarget两个属性。这两属性有什么区别呢？例子 <view data-id="1" bind:tap="action"> <view></view> <image src=""&...

vue事件传值使用 dataset 对象传值

qq_63608386的博客

12-29

508

【代码】vue事件传值使用 dataset 对象传值。

【Vue 响应式原理】发布订阅模式、观察者模式

zimeng303的博客

12-13

4421

响应式原理课程目标模拟 Vue 响应式原理。准备工作数据驱动数据响应式数据模型仅仅是普通的 JavaScript 对象，而当我们修改数据时，视图会进行更新，避免了繁琐的 DOM 操作，提高开发效率。双向绑定数据改变，视图改变；视图改变，数据也随之改变我们可以使用 v-model 在表单元素上创建双向数据绑定数据驱动（Vue 最独特的特性之一）开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图响应式的核心原理 Vue 2.x – 基于 Object.d

学习使用vue（笔记）

weixin_45826772的博客

10-10

494

1：vue基本语法 1.1：基本数据类型和字符串取值: {{code}} {{str}} data:({ code:100 str:"test" }) 1.2: 对象数据类型支持ognl语法取值: {{stu.name}} {{stu.age}} data:({ stu{ name:"zhangsan" age:12 } }) 1.3:if判断语句 <div id="container"> <label class="c" v-if="

Vue.js获取data-*的值

程麒阁的博客

07-27

8950

data-* 这个属性熟悉JS的小伙伴都知道，data-*是一个自定义属性，它的功能是视图层往js传递我们想要传的数据。我们的JS可以控制视图层，但是我们往往需要用户操作视图层，逻辑层也能够获取用户的交互值，这个时候我们就需要data-*属性了获取普通数据我们的js数据类型大体上可分为，数字类型，字符类型，布尔值类型，对象类型。其实还有undefined和null 我把数字类型，字符类型，布尔值类型成为普通数据类型，我们接下来分别演示静态获取静态获取指的是我们的data-*是写死的，不是动态的 ht

配置@vitejs/plugin-vue-jsx

08-27

要配置@vitejs/plugin-vue-jsx，你需要在Vite项目的配置文件中引入该插件并添加到plugins数组中。在给定的引用中，你可以看到示例代码中已经引入了@vitejs/plugin-vue插件。首先，确保你已经安装了@vitejs/plugin-vue-jsx依赖。然后，在配置文件中，你需要将这个插件导入并将其添加到plugins数组中，如下所示： ```javascript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import vueJsx from '@vitejs/plugin-vue-jsx' export default defineConfig({ plugins: [ vue(), vueJsx() ], // 其他配置项... }) ``` 这样就配置好了@vitejs/plugin-vue-jsx插件。你可以根据自己的需求进行其他配置，并在其他插件后面添加该插件。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [TS2307: Cannot find module ‘@vitejs/plugin-vue-jsx‘ or its corresponding type declarations.](https://blog.csdn.net/sinat_23030553/article/details/130388495)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vite.config.js配置-解决跨域问题，以及@vitejs/plugin-vue等报错](https://blog.csdn.net/qq_41809961/article/details/128503395)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]