vue如何獲取自定義元素屬性參數值的方法
這篇文章主要介紹了vue如何獲取自定義元素屬性參數值的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨着小編來一起學習學習吧
偶爾還是會陷入到DOM操作上面去，其實你應該關心的是數據傳遞，而不是操作DOM。如果你是想獲取data-num的數據，可以這樣寫：
|
1
2
3
4
5
|
<span @click=
"getData($event,'21')"
>55</span>
getData:
function
(e,num) {
console.log(num)
}
|
這樣就可以取到這個值了，如果你是確實想操作DOM，那你可以這樣寫：
|
1
2
3
4
5
|
<span data-num=
"21"
ref=
"dataNum"
@click=
"getData($event)"
>55</span>
getData:
function
(e) {
console.log(
this
.$refs.dataNum.dataset.num);
}
|
2.通過e.target.getAttribute
|
1
2
3
|
<div id=
"app"
>
<span data-num=
"21"
@click=
"getData($event)"
>55</span>
</div>
|
|
1
2
3
4
5
6
7
8
|
new
Vue({
el:
'#app'
,
methods:{
getData:
function
(e) {
console.log(e.target.getAttribute(
'data-num'
))
}
}
})
|
3.自定義命名
如：html
|
1
|
<
div
class
=
"live-dd"
numId = "<{$item.id}>"></
div
>
|
js:
|
1
|
$(
'.live-dd'
).on(
"click"
,
function
(){
var
num =
this
.getAttribute(
'numId'
);location.href=
'/live/info?id='
+num;})
|
使用jq的方法
|
1
2
3
|
<span class=
"vk_cq5"
classid=
"<{$smarty.get.id}>"
>
var
live_id = $(
'.vk_cq5'
).attr(
'classid'
)
|
ref的用法 相當於操作dom
html :
|
1
2
3
4
5
|
<
div
>
<
div
id
=
"box"
ref
=
"mybox"
>
DEMO
</
div
>
</
div
>
|
js:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
export
default
{
data () {
return
{
}
},
mounted () {
this
.init();
},
methods:{
init() {
const self =
this
;
this
.$refs.mybox.style.color =
'red'
;
setTimeout(() => {
self.$refs.mybox.style.color =
'blue'
;
},2000)
}
}
}
|
以上所述是小編給大家介紹的vue如何獲取自定義元素屬性參數值的方法詳解整合