Vue 获取自定义属性的值
在jquery中，如果要获取 data-*** 的值可以通过 $('目标元素').data('属性名') 来获取。
在Vue中如何获取该值呢？
1.换个思路，作为参数传递。
如下代码：
<button @click="say('Hi')">say hi</button>
methods: {
say(message){
console.log(message)
}
}
2.通过e.target.dataset.*** 或者 e.target.getAttribute('data-***')来获取。
<button @click="sayBye($event)" data-msg="Bye">say bye</button>
methods: {
sayBye(e){
//let msg=e.target.getAttribute('data-msg');
let msg=e.target.dataset.msg;
console.log(msg)
}
}
3.通过$refs获取。
<button @click="sayHello()" data-msg="Hello" ref="dataMsg">say hello</button>
methods: {
sayHello(){
let msg=this.$refs.dataMsg.dataset.msg;
console.log(msg)
}
}
代码完整案例如下：
<!doctype html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>vue</title> </head> <body>
<div id="app">
<button @click="say('Hi')">say hi</button>
<button @click="sayBye($event)" data-msg="Bye">say bye</button>
<button @click="sayHello()" data-msg="Hello" ref="dataMsg">say hello</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
},
methods: {
say(message){
console.log(message)
},
sayBye(e){
//方法一
//let msg=e.target.getAttribute('data-msg');
//方法二
let msg=e.target.dataset.msg;
console.log(msg)
},
sayHello(){
let msg=this.$refs.dataMsg.dataset.msg;
console.log(msg)
}
}
})
</script> </html>
感谢阅读~~
Vue 获取自定义属性的值的更多相关文章
- vue2.0获取自定义属性的值
最近在项目中使用了vue.js.在爬坑的路上遇到了很多问题.这里都会给记录下来,今天要说的是怎么获取自定义属性的值. HTML <!DOCTYPE html> <html> & ...
- jquery获取自定义属性的值
//获取属性值 1 <div id="text" value="黑哒哒的盟友"><div> jQuery取值: $("#tex ...
- 在java中获取attr的值
首先说如何获取已经在style里面定义好的attr的值,以colorPrimary为例: TypedValue value = new TypedValue(); mContext.getTheme( ...
- vue获取下拉框值
vue获取下拉框的值,用vue-modle,只有点击下拉框的值才会赋值到下拉框中,初始时下拉框没有数据,而改用$event就不会出现这样的问题,下面看代码以及图解: v-model解决方式: < ...
- Jquery怎么获取select选中项 自定义属性的值
Jquery如何获取select选中项 自定义属性的值?HTML code <select id="ddl" onchange="ddl_change(this)& ...
- layui select获取自定义属性值
layui-select写法: <option value='> 我想在点击的时候获取自定义属性data-method的值,其中selectId是该select的id form.on('s ...
- 获取当前html标签自定义属性的值
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- jquery获取data-xxx自定义属性的值遇到的问题
直接用jquery的 data("name") 获取 data-name的值有问题,获取的只是最初的值,即使后边改变也不会变,所以还是要用attr("data-name& ...
- jquery获取select选中项 自定义属性的值
<select id="serialNo" > <option value=''1' data-id="001">第一次</opt ...
随机推荐
- linux分享三：文件操作
查找文件命令: which 查看可执行文件的位置 whereis 查看文件的位置 locate 配 合数据库查看文件位置 find 实际搜寻硬盘查询文件 ...
- windows库的创建和使用：静态库+动态库
windows库的创建和使用:静态库+动态库 一.静态库的创建和使用 1. 静态库创建 (1)首先创建projecttest,測试代码例如以下: 1) test.h void test_print ...
- jmeter经验---java 追加写入代码一例
最近最项目参数化的时候用到,场景是这样的,需要测试A和B两个接口,其中B接口传入的参数必须是传递给A接口过的,所以整理一个思路就是: 1. 正常调用A接口,但是将传递给A接口的参数保存到文本里,此处要 ...
- Atitit hibernate3 hinernate4 hibernate5新特性attilax总结
Atitit hibernate3 hinernate4 hibernate5新特性attilax总结 1.1. Hibernate3的新特性 1 1.2. hibernate4.1版本中的新特性和h ...
- 深入理解Linux内核－I/O体系结构和设备驱动程序
系统总线:1.链接CPU.RAM.I/O设备之间的数据流动.例如:PCI.ISA.EISA.MCA.SCSI.USB2.任何I\O设备有且仅能链接一条总线. I\O端口:1.每个连接到I\O总线上的设 ...
- 并发编程 – Concurrent 用户指南--转
1. java.util.concurrent – Java 并发工具包 Java 5 添加了一个新的包到 Java 平台,java.util.concurrent 包.这个包包含有一系列能够让 Ja ...
- 菜鸟学Java（十六）——Jboss简介
简介 JBoss是全世界开发者共同努力的成果,一个基于J2EE的开放源代码的应用服务器. 因为JBoss代码遵循LGPL许可,可以在任何商业应用中免费使用它,而不用支付费用.2006年,Jboss公司 ...
- 使用PyHive操作Hive
使用PyHive操作Hive 废话 搜了一下,看到了StackOverFlow的回答,试了一下前两个方案,感觉第二个更简洁,这里记录一下,更详细的见参考. 安装依赖 pip install sasl ...
- STM32内部flash存储小数——别样的C语言技巧
今天在进行STM32内部falsh存储的时候,发现固件库历程的函数原型是这样的: 第一个是地址,在我的STM32中是2K一页的,第二个是要写入的数据. 问题就来了,存储一个小数该怎么办呢?固件库给的是 ...
- python zeromq 使用
Reference: http://blog.csdn.net/kwsy2008/article/details/49464663 本篇博客将介绍zmq应答模式,所谓应答模式,就是一问一答,规则有这么 ...