vue 设置标签data值，获取标签data参数

最新推荐文章于 2024-06-21 09:43:57 发布

嘿喵-财运旺旺

最新推荐文章于 2024-06-21 09:43:57 发布

阅读量2.9w

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/sym134/article/details/85328471

vue 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一种在Vue框架中使用@click事件处理程序来获取HTML元素数据的方法。通过一个具体的示例，展示了如何在span标签上绑定点击事件，并在事件触发时通过e.srcElement.dataset.id访问到该元素的特定数据属性。

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


// html
<span @click="getdata" :data-id="ids" >待付款</span>


// VUE
getdata:function(e){
console.log(e.srcElement.dataset.id)
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

嘿喵-财运旺旺

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue入门到精通详解介绍（第一部分）data详细介绍

WYT11的博客

08-16

6203

第一章引入vue脚本在html页面上基本操作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"

html页面怎么获取vue里面的data,Vue中避免滥用this去读取data中数据

weixin_31487917的博客

06-09

4124

这篇文章主要介绍了Vue中避免滥用this去读取data中数据的的相关资料，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下前言在Vue中，data选项是个好东西，把数据往里一丢，在一个Vue组件中任何一个地方都可以通过this来读取data中数据。但是要避免滥用this去读取data中数据，至于在哪里要避免滥用，如果滥用会导致什么后果，本专栏将会一一揭晓。一、用this读取data...

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

vue获取标签上的属性值

热门推荐

杨葱儿

04-26

2万+

方法一： <div id="app"> <button @click="getData($event,'100')">点我</button> </div> methods : { getData(e,num) { console.log(num); // 输出 100 } } 方法二： &lt...

获取vue标签中指定的值

骨子里的偏爱

04-18

1042

【代码】获取vue标签中指定的值。

Vue的data标签

weixin_54048131的博客

02-11

239

使用v-model绑定数据： vue中scrpt节点这里的data的节点： return中数据写成，集合的形式

vue 中获取动态渲染的标签内容

业余前端的职业经历

10-09

3272

之前的博客中曾经的我面试碰见了一道题目就是如何获取从后台回来的一组数据动态渲染到页面中的标签我说的是在created 中请求数据然后在monted 中进行获取动态渲染的标签其实这个倒也没错但是不能算对下面我举一个例子哈 data中有一个数组然后我把它渲染到页面中我是在 mounted 中对这个动态渲染的标签进行获取 <ul> <li v-for="(item, index) in userList" :key="index">

Vue执行方法,方法获取data值,设置data值,方法传值操作

12-28

方法写在methods中 ...可通过 @click=”run($event)”，将事件对象传到方法中，然后根据事件对象的e.srcElement设置点击标签的属性，也可以通过e.srcElement.dataset获取自定义属性 <div id=app>

vue 获取元素额外生成的data-v-xxx操作

10-14

为了确保这些动态添加的元素能够应用到组件的正确样式，我们需要在添加元素之前，获取到对应父元素的`data-v-xxx`属性值，并将这个值设置到新元素上。示例代码如下： ```javascript var nodeP = document....

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

12-28

第一步：首先在标签上绑定上@click=”getDateId（item.id）”,并将属性值传到绑定的事件里面第二步：在标签上继续绑定：date-id = “item.id”属性第三步：在[removed]里面的属性methods里面添写上事件函数 ...

在VUE style中使用data中的变量的方法

01-19

如果用vue传统的动态绑定class和style的方式去修改样式（文末会提到），需要额外写很多变量和模块class，那如果我的样式的值，可以从父组件，传到子组件，子组件根据传入值去渲染对应样式的值，其实就是要再style中...

vue设置标签data值，获取data参数

weixin_30950237的博客

09-11

1573

// html <div :data-id="item.id">小明</div> // vue getdata:function(e){ 　　console.log(e.srcElement.dataset.id) } 　　转载于:https://www.cnblogs.com/sunday123/p/11504788.html...

Vue2.5学习笔记（二）深入了解组件

Zijeak的博客

09-08

4339

1.组件使用的细节 1.2 子标签内使用组件假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref

6.认识vue Data

m0_70206803的博客

06-27

338

Data为什么必须是一个函数？根实例对象data可以是对象也可以是函数，不会产生数据污染情况.组件中的data必须是一个函数因为组件中的data如果是一个对象的话, 对象A的值发生改变,对象B的值也会跟着改变但是,组件中的data是一个函数的话,不会产生这样的问题这样的好处是,不会受到其他实例对象数据的污染.组件中data必须为函数，目的是为了防止多个组件对象之间共用一个data，产生数据污染。 vue中组件是用来复用的，为了防止data复用，将其定义为函数。因为当 data 是函数时，组件实例化的时

【Vue 组件data函数】

武帝为此的博客

10-10

1752

data。

Vue之data选项

玉案轩窗的博客

01-30

3854

前言本篇是分析new Vue()过程中对于data的处理细节以及响应式原理，主要了解如下两点： Vue实例的data选项具体的逻辑 Vue响应式原理学习 data处理逻辑下面是Vue实例创建中initState的处理逻辑： initState的处理逻辑是处理组件中选项即props、data、computed、watch、methods，而关于data部分的处理逻辑，具体如下： opts.data ? initData(vm) : observe(vm._data = {}, true); 首先看

Vue的data选项使用注意

weixin_30399871的博客

11-27

655

使用组件时，大多数可以传入到Vue构造器中的选项可以在Vue extend（）或 Vue.component() 中注册组件时使用，但是有一个重要的前提：data必须是函数 1 1.在 var vm = new Vue({ 2 el：'#app', 3 daa:{} 4 })中的data是用来存放数据的，是一个对象 5 6 2.在Vue.co...

Vue配置项data

weixin_45134711的博客

06-21

2629

对象式对于根实例或者非复用组件，通常直接提供一个对象字面量作为data的值。在对象式中，data属性是一个普通的对象，并且直接作为组件实例的一个属性// 对象形式 (适用于根实例或非复用组件)new Vue({data: {',count: 0,user: {age: 30},// 其他选项...})data是一个普通的对象，通过对象属性初始化数据优点：语法简洁，直观易懂。可以通过对象字面量的方式一次性定义多个属性，方便管理多个数据。

Vue(14)data属性

大连赵哥的博客

06-18

175

Vue(14)data属性

vue 获取标签属性值