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 泛型(Generics) 综述
一. 引子 一般的类和方法.仅仅能使用详细类型:要么是基本类型.要么是自己定义类型.假设要编写能够应用于多种类型的代码,这样的刻板的限制对代码的束缚就会非常大. 多态算是一种泛化机制,但对代码的约束还 ...
- Android Studio 1.1.0 向导页(首页) 解析，以及版本控制 （SVN 和 GIT 的检出）
使用Android Studio首先要理清楚, Android Studio 的 project 相当于Eclipse的 Workspace Android Studio 的 module 相当于E ...
- 译：1. 初识 Apache Axis2
欢迎使用Apache Axis2 / Java Apache Axis2 是一个Web Service SOAP / WSDL 引擎,它被广泛用于Apache Axis SOAP 栈. Apache ...
- CentOS编译安装vim
#删除系统自带的vim rpm -qa | grep vim rpm -e vim-X11-7.4.629-5.el6_8.1.x86_64 vim-filesystem-7.4.629-5.el6_ ...
- kvm 给虚机增加网卡
[root@666 ok]# virsh domiflist c03 Interface Type Source Model MAC --------------------------------- ...
- Fluent UDF【2】：学习途径
要怎样做才能做到无畏惧编写任何UDF程序?估计很多与UDF打交道的人都会问到这个问题. 面对UDF文档中那众多的宏描述,小伙伴们是不是感觉到茫然无措,不知从何入手.有时候读别人写好的程序感觉并不难,然 ...
- 哈佛大学 Machine Learning
https://am207.github.io/2017/material.html https://am207.github.io/2017/topics.html https://am207.gi ...
- scikit
http://scikit-learn.org/dev/_downloads/scikit-learn-docs.pdf http://scikit-learn.org/stable/tutorial ...
- ActionScript 3操作XML 详解
AS3引入了E4X ,它是根据ECMAScript标准处理XML 数据的全新机制.这使得程序员在程序中无缝地操作XML.在AS3中可以使用XML字面值将XML数据直接写入代码,该字面值将被自动解析. ...
- flash 拾遗
http://sourceforge.net/adobe/wiki/Projects/ http://www.adobe.com/devnet/air/air-sdk-download.html ht ...