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 ...
随机推荐
- ios页面间跳转方式总结
转自:http://www.cnblogs.com/anywherego/p/3542202.html 下面以OldViewController(oldC)的按钮btn点击后跳转到NewViewCon ...
- ASP.NET Core2.0 环境下MVC模式的支付宝PC网站支付接口-沙箱环境开发测试
1.新建.NET Core web项目 2.Controllers-Models-Views 分三个大部分 3.下载安装最新sdk 官方的SDK以及Demo都还是.NET Framework的,根据官 ...
- [Windows Azure] Building worker role A (email scheduler) for the Windows Azure Email Service application - 4 of 5.
Building worker role A (email scheduler) for the Windows Azure Email Service application - 4 of 5. T ...
- python（57）：私有变量，代码块
转载:http://blog.csdn.net/zhu_liangwei/article/details/7667745 引子 我热情地邀请大家猜测下面这段程序的输出: class A(object) ...
- myeclipse上传git的问题
unstaged changes 建好仓库,连接到git之后,在上传代码的时候发现有一些代码是unstaged changes状态.这样的文件是没法上传到git上去的.解决方法是给这些文件增加inde ...
- Linux下如何查看tomcat是否启动，并杀死重启
在Linux系统下,遇到过这样的问题,项目中使用 ./shutdown.sh 关闭Tomcat失败 Using CATALINA_BASE: /usr/local/tomcat Using CATAL ...
- spring mvc之请求过程源码分析
简介 上一篇,我们分析了spring mvc启动过程的源码,这一节,来一起分析下在用户请求controller的过程中,spring mvc做了什么事? 一.准备 我写这么一个controller p ...
- setOnPageChangeListener 过时了怎么办？
今天使用ViewPager发现setOnPageChangeListener的方法竟然过期了.并且AS编译不通过了,最后查了一下原来把set换成add了,代码例如以下: setOnPageChange ...
- poj3436 ACM Computer Factory， 最大流，输出路径
POJ 3436 ACM Computer Factory 电脑公司生产电脑有N个机器.每一个机器单位时间产量为Qi. 电脑由P个部件组成,每一个机器工作时仅仅能把有某些部件的半成品电脑(或什么都没有 ...
- Domain应用之 根据某个Many2one的对象的 X2many对象 过滤
如果两者都是many2one类型的对象,过滤非常简单,在xml中添加domain过滤即可,比如 国家.省市之间的联动关系. 如果想要根据某个对象的X2many类型的字段进行过滤该如何去做呢? 答案是利 ...