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 ...
随机推荐
- 采集java性能指标数据
这里我们开发把每个服务的jvm的运行情况和gc的情况卸载java程序里,这里我们访问一个URL地址就可以得到json数据 #!/bin/bash # 定时收集java服务metrics # curl ...
- 禁用 Windows 启动时错误恢复的“启动启动修复（推荐）”
bcdedit /set {default} bootstatuspolicy ignoreallfailures bcdedit /set {current} recoveryenabled No
- 已安装 SQL Server 2005，安装 SQL Server 2008 时提示需要删除 SQL Server 2005 Express 工具
错误提示:已安装 SQL Server 2005 Express 工具.若要继续,请删除 SQL Server 2005 Express 工具. 解决方案: 修改注册表:HKLM\Software ...
- windows下bash终端--git-bash总汇
git bash是一个比较好用的终端(win下),但有一些细节需要调整后才好用. 1.比如,登陆后终端的表格,以及个别符号显示为乱码. 解决方法: 1).点击git bash左上角,选择“option ...
- 深入理解Linux内核－I/O体系结构和设备驱动程序
系统总线:1.链接CPU.RAM.I/O设备之间的数据流动.例如:PCI.ISA.EISA.MCA.SCSI.USB2.任何I\O设备有且仅能链接一条总线. I\O端口:1.每个连接到I\O总线上的设 ...
- R语言之——字符串处理函数
nchar 取字符数量的函数 length与nchar不同,length是取向量的长度 # nchar表示字符串中的字符的个数 nchar("abcd") [1] 4 # leng ...
- HTML5学习笔记（四）：H5中表单新增元素及改良
方便布局 表单内容可以放在表单标签之外,这样做的好处是方便设计时不用考虑一定要将表单元素放在指定的form标签之下,只要指定元素适用于哪个表单即可,如下: <form id="test ...
- [Windows Azure] How to Scale an Application
How to Scale an Application To use this feature and other new Windows Azure capabilities, sign up fo ...
- 【Delphi】基于状态机的串口通信
通信协议 串行通信接口(如RS232.RS485等)作为计算机与单片机交互数据的主要接口,广泛用于各类仪器仪表.工业监测及自动控制领域中. 通信协议是需要通信的双方所达成的一种约定,它对包括数据格式. ...
- 【ARM】ARM程序规范
1.函数名单词之间用_隔开,每一个字母大写 Uart_Printf() //这个由三星的TEST风格延续下来,因此没有参数时,必须加void,否则ADS会编译报警 void Te ...