진스
data-속성값 얻는 방법 data-attribute 본문
728x90
vue js에서 클릭 이벤트에 대한 속성 값을 가져와야하는 경우 vuejs에서 데이터 속성 값을 가져 오는 데 도움이 될 수 있습니다. 버튼 클릭 이벤트를 작성하고 vue.js에서 사용자 정의 속성 값을 가져옵니다.
이 예제에서는 "data-id"와 같은 사용자 지정 속성이있는 버튼을 사용하고 버튼을 클릭하면 콘솔에서 사용자 지정 데이터 속성 값의 해당 값을 가져옵니다. event.target.getAttribute ()를 사용하여 데이터 속성 값을 얻습니다.
event.target.getAttribute (attribute_name);
<div id = "app">
<button v-on : click = "callFunction"data-id = "22"> 클릭하기 </ button>
</ div>
data : {
message : "환영합니다, 잠시만 기다려주세요 ...."
},
methods:{
callFunction : function (event) {
var id = event.target.getAttribute('data-id');
console.log (id);
}
}
728x90
'Vue' 카테고리의 다른 글
[Vue.js] Vue 애니메이션(Animate) #2 - Javascript Hooks, Velocity (0) | 2021.06.07 |
---|---|
[Vue.js] Vue 애니메이션(Animate) #1 - Transition (0) | 2021.06.07 |
Vue/Nuxt Element 높이 값 받아오기 (0) | 2021.05.21 |
vue 페이지 이동시 input 창 자동 포커스 (2) | 2021.05.19 |
Vue Swipe Tabs 구현 (0) | 2021.05.16 |
Comments