vue @click 获取 html5 data-属性

最新推荐文章于 2024-06-14 11:31:16 发布
原创 最新推荐文章于 2024-06-14 11:31:16 发布 · 1.2k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html5

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

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

特性：
  • 一个元素可以有任意数量的 data 属性。
  • data-* = “” 在vue中使用时，不可以存对象类型属性否则会直接输出[object object]，如果一定要使用对象，将对象序列化
  • data-id 获取数据： $ event.srcElement.dataset.id
  <div class="test">
    <!--  event对象只在事件发生的过程中才有效 -->
    <h2 @click="g
最低0.47元/天 解锁文章
在Vue中获取自定义属性方法:data-id的实例
10-14
总结，Vue中获取自定义属性`data-id`的方法是通过事件监听器和属性绑定，结合`methods`中的函数来实现。同时，我们可以利用`localStorage`进行数据存储，通过解析URL获取参数，以及使用Vue Router进行页面导航和标题...
vue v-on:click传递动态参数的步骤
10-14
在具体实现时，我们首先在Vue实例的data属性中定义好数据结构和方法，然后在模板中通过v-for指令渲染这些数据，并在每个元素上绑定点击事件： ```html <div v-for="item in items"> <button v-on:click="upHref($...
【Vue-day1】Vue获取Html标签中的值
m0_57450589的博客
03-03 7506
方法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 1802
资料 H5中data-xxxx属性. 基本使用 注意这里的navFirst($event),只能写$event,写别的都获取不到 <div class="header-nav-item" data-num="6" @mouseenter="navFirst($event)" @mouseleave="navReset" > 技能培训 ...
click 获取数据data-*_vue实现后端获取数据
weixin_39796140的博客
02-03 1364
终于，在前辈的指导和自己的摸索下，终于实现的对于后端数据的获取以及对于数据传至表格，下面和大家简述一下流程： 一、在页面实现获取操作：_serverMenus() { serverMenus() .then((res) => {if(res.message.code===0){//若message.code===0，则进行赋值 ...
Vue项目中，使用H5新增datalist标签
Hello World
08-03 1099
Vue项目中，使用H5新增datalist标签
如何在Vue中获取自定义属性方法：data-id
u010227042的博客
11-13 4889
获取自定义属性的方法： 第一步：首先在标签上绑定上@click="changeCheckBox（item.id）",并将属性值传到绑定的事件里面 第二步：在标签上继续绑定：date-id = "item.id"属性 第三步：在<script>里面的属性methods里面添写上事件函数 changeCheckBox(id){} 在事件函数里面获取id的值即可 <div class...
vue组件添加事件@click.native操作
01-21
2，等同于在子组件中： 子组件内部处理click事件然后向外发送click事件：$emit(“click”.fn) <Item xss=removed></Item> 补充知识：vue——组件间（兄弟组件间）事件派发与接收 法一 main.js 在初始化vue之前，给...
解决v-html代码中添加@click点击事件不生效问题
wonderfulgood的博客
06-14 1370
解决v-html点击事件不生效问题
Vue基础语法之@click、时间修饰符@click.stop与@click.prevent、按键修饰符（如@keyup.enter）
热门推荐
wangchaohpu的博客
11-27 16万+
1、绑定监听@click:（以监听click为例，其他如keyup，用法类似）   v-on:click="fun"   @click="fun"   @click="fun(参数)" &lt;button @click="test1"&gt;test1&lt;/button&gt;   &lt;button @click="test2('abc')"&
vue中@click(function())中function接受来自data中返回的值
Major_S的博客
03-28 1887
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 4553
解决在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 3549
在某元素上面用data-*绑定了某个属性，取值使用event.currentTarget.dataset.*。但是event有target和currentTarget两个属性。这两属性有什么区别呢？ 例子 <view data-id="1" bind:tap="action"> <view></view> <image src=""&...
vue事件传值使用 dataset 对象传值
qq_63608386的博客
12-29 561
【代码】vue事件传值使用 dataset 对象传值。
【Vue 响应式原理】发布订阅模式、观察者模式
zimeng303的博客
12-13 5072
响应式原理 课程目标 模拟 Vue 响应式原理。 准备工作 数据驱动 数据响应式 数据模型仅仅是普通的 JavaScript 对象，而当我们修改数据时，视图会进行更新，避免了繁琐的 DOM 操作，提高开发效率。 双向绑定 数据改变，视图改变；视图改变，数据也随之改变 我们可以使用 v-model 在表单元素上创建双向数据绑定 数据驱动（Vue 最独特的特性之一） 开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图 响应式的核心原理 Vue 2.x – 基于 Object.d
学习使用vue（笔记）
weixin_45826772的博客
10-10 552
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 9178
data-* 这个属性熟悉JS的小伙伴都知道，data-*是一个自定义属性，它的功能是视图层往js传递我们想要传的数据。我们的JS可以控制视图层，但是我们往往需要用户操作视图层，逻辑层也能够获取用户的交互值，这个时候我们就需要data-*属性了 获取普通数据 我们的js数据类型大体上可分为，数字类型，字符类型，布尔值类型，对象类型。其实还有undefined和null 我把数字类型，字符类型，布尔值类型成为普通数据类型，我们接下来分别演示 静态获取 静态获取指的是我们的data-*是写死的，不是动态的 ht
Vue绑定自定义属性data, 并且获取数据
小火车况且况且况且的博客
04-21 1991
data。
@johmun/vue-tags-input slot怎么用
最新发布
08-05
在使用 `@johmun/vue-tags-input` 组件时，可以通过 `slot` 实现高度的自定义化，比如修改标签的显示样式、添加删除按钮或其他交互元素。该组件支持通过 `slot` 插入自定义的 HTML 模板来渲染每个标签项。 通过 `slot` 可以访问到每个标签的数据对象，例如标签的文本值、是否处于编辑状态等属性，从而根据这些属性构建自定义的 UI 元素[^1]。 以下是一个使用 `slot` 自定义标签显示的示例： ```vue <template> <vue-tags-input v-model="tag" :tags="tags" @tags-changed="newTags => tags = newTags" > <template v-slot:tag="{ tag }"> <div class="custom-tag"> <span>{{ tag.text }}</span> <button @click="removeTag(tag)">×</button> </div> </template> </vue-tags-input> </template> <script> import VueTagsInput from '@johmun/vue-tags-input'; export default { components: { VueTagsInput, }, data() { return { tag: '', tags: [], }; }, methods: { removeTag(tag) { this.tags = this.tags.filter(t => t.text !== tag.text); }, }, }; </script> <style> .custom-tag { display: inline-block; background: #e0e0e0; padding: 4px 8px; border-radius: 4px; margin: 4px; } .custom-tag button { margin-left: 8px; background: none; border: none; font-size: 16px; } </style> ``` 在这个示例中，`v-slot:tag` 定义了一个自定义的标签模板，其中包含一个 `span` 用于显示标签文本，以及一个 `button` 用于删除该标签。通过 `@click="removeTag(tag)"`，可以触发一个方法，从 `tags` 数组中移除对应的标签。 此外，`vue-tags-input` 还支持其他类型的 `slot`，例如用于自定义输入框的 `input` 插槽，或者用于自定义建议列表的 `autocomplete-item` 插槽，这些都可以按照类似的方式进行自定义。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

webhyx

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值