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 ...
随机推荐
- jQueryUI modal dialog does not show close button (x) JQueryUI和BootStrap混用时候，右上角关闭按钮显示不出图标的解决办法
I had this problem and was able to resolve it with the declaration below. $.fn.bootstrapBtn = $.fn.b ...
- gitlab 迁移、升级打怪之路：8.8.5--> 8.10.8 --> 8.17.8 --> 9.5.9 --> 10.1.4 --> 10.2.5
gitlab 迁移.升级打怪之路:8.8.5--> 8.10.8 --> 8.17.8 --> 9.5.9 --> 10.1.4 --> 10.2.5 gitlab 数据 ...
- ssr.js数据模拟工具
ssr相当于是搭建了一个 Mock Server ,构建假数据,然后把这些假数据存到 JSON 文件上,Mock Server 可以响应请求或者生成页面,当然也可以顺便生成 API 文档. 强制跨域访 ...
- Chrome多线程下载
https://github.com/jae-jae/camtd https://aria2.github.io/ 切换到解压目录D:\Tools\aria2-1.34.0-win-64bit中,打开 ...
- ElasticSearch + xpack 使用
ElasticSearch 是一个高可用开源全文检索和分析组件.提供存储服务,搜索服务,大数据准实时分析等.一般用于提供一些提供复杂搜索的应.我们为什么要选择 ElasticSearch ?因为它是一 ...
- Zlib库的安装与使用
在实际应用中经常会遇到要压缩数据的问题,常见的压缩格式有zip和rar,而Linux下那就更多了,bz2,gz,xz什么的都有,单单Linux下的解压和压缩命令就有好多呢?没有什么好不好的.查了资料, ...
- Unable to load configuration. - [unknown location]
严重: Exception starting filter StrutsPrepareFilterUnable to load configuration. - [unknown location] ...
- Replace 在动态sql中的实现
set @stsqlReplace=' update ChgCfm set cfmdate=replace(cfmdate,'''''''',''''), cfmstatu=replace(cfmst ...
- 【Mysql】Fedora下 Mysql 安装及配置
1.安装 Mysql Server # yum install mysql mysql-server 可以到mysql官网去下载,我下载的是通用版本.你需要下载下面四个文件就可以了. mysql-cl ...
- 6个监控linux资源的快速工具
系统管理员需要对服务器进行监控以确保其正常运行,通过这种方式管理员能够提前发现可能存在的问题并恢复系统,以避免麻烦的出现. Linux上有很多命令来监控不同的系统资源,如CPU使用率.内存使用情况.网 ...