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 ...
随机推荐
- Windows 7 添加SSD硬盘后重启卡住正在启动
楼主办公电脑,原来只配置了一块机械硬盘,用着总很不顺心,于是说服领导给加了块SSD固态硬盘. 操作如下: 1.在PE下分区格式化新固态硬盘,将原来机械硬盘的C盘GHOST备份后还原到新固态硬盘: 2. ...
- MySQL 5.6学习笔记（查询数据、插入、更新、删除数据）
1. 查询语法 SELECT {*|<字段列表>} [FROM table_references [WHERE where_condition] [GROUP BY {col_name | ...
- jQuery学习笔记（jquery.simplemodal插件）
官网地址:http://www.ericmmartin.com/ SimpleModal是一个轻量级的jQuery插件,它为模式窗口的开发提供了一个强有力的接口,可以把它当作模式窗口的框架.Simpl ...
- 一种3D空间的柱状多边形检测实现
最近无意中拓展出这个东西,基于之前写的2D多边形检测: http://www.cnblogs.com/hont/p/6105997.html 而判断两条线相交的方法替换成了我后来写的差乘判断: htt ...
- 两种屏幕HUD区域限制的做法(矩形,弧形)
HUD区域限制算是比较常用到的功能,方形的HUD区域限制多见于小地图,弧形或者椭圆多见于屏幕范围约束. 我没有研究倒角矩形做法,而是将椭圆和矩形进行插值得到一个弧度比较高的形状: 当插值为0时限制范围 ...
- Unity获取插件所在目录的巧妙方法
编写插件时,Unity没有提供当前被放置目录的功能.比如资源商店的一些插件需要放在Assets根目录下. 但通过脚本可以反求出所在目录,对于自己写的插件,就避免了类似问题: var scriptObj ...
- 【Unity】8.3 布局模式（GUILayout）
分类:Unity.C#.VS2015 创建日期:2016-04-27 一.简介 在Unity 5.x中,GUI控件的布局方式有两种. 一种为固定布局,即在绘制控件的时候将位置参数传入,指定控件的精确位 ...
- MySQL开发索引创建规范
1. [强制]业务上具有唯一特性的字段,即使是多个字段的组合,也必须建成唯一索引. 说明:不要以为唯一索引影响了insert速度,这个速度损耗可以忽略,但提高查找速度是明显的:另外,即使在应用层做了非 ...
- [Windows Azure] Manage the Availability of Virtual Machines
Manage the Availability of Virtual Machines You can ensure the availability of your application by u ...
- Shell（6）： 多线程操作及线程数
任务需要:当我需要对一个文件夹中的文件,分别压缩的时候: 原始的代码: #!/usr/bin/shell function getdir(){ for element in `ls $1` do #e ...