Vue에서는 addClass, removeClass 같은 기능은 없는건가요 ?

Question

$(Element).on('click', function(e) { $(this).siblings().removeClass('active'); if ( !$(this).hasClass('active') ) { $(this).addClass('active'); } else { $(this).removeClass('active'); } });대략 이런기능을 만들고자 합니다..제이쿼리를 사용하면 편하긴 한데 Vue 에서는 이런기능이 없나요 ?Vue 로 만드려면 다른 방법이 따로 있을까요..?var clickMe = document.querySelectorAll('.clickMe'); function active(e) { if (e.target.classList.contains('active')) { e.target.classList.remove('active'); return false; } clickMe.forEach(function (i, k) { clickMe[k].classList.remove('active'); }); e.target.classList.add('active'); } for (var i = 0; i < clickMe.length; i++) { clickMe[i].addEventListener('click', active, false); }망한거같습니다. 너무 제이쿼리에 익숙해지는 바람에 바닐라스크립트는 다 잊어버렸습니다.JavaScript 로 구현하려고 하니 너무 길어지는군요.. Vue 에서 해당 코드를 구현한다고 하면.. methods: { ClickMe: function (e) { var clickMe = document.querySelectorAll('.clickMe'); function active(e) { if (e.target.classList.contains('active')) { e.target.classList.remove('active'); return false; } clickMe.forEach(function (i, k) { clickMe[k].classList.remove('active'); }); e.target.classList.add('active'); } for (var i = 0; i < clickMe.length; i++) { clickMe[i].addEventListener('click', active, false); } } } Vue를 공부하고있지만 어떤식으로 사용해야 효율적으로 제이쿼리를 대체할 수 있을지 모르겠습니다!

코드17 · Accepted Answer

원하시는 답변 방향이 맞는건지는 모르겠지만 아래의 내용을 참고해보시면 될 것 같습니다. https://kr.vuejs.org/v2/guide/class-and-style.html

TeraGo · Answer

Vue 문법도 틀렸네요.. 어떤식으로 써야 맞는건지 모르겠습니다!

삼이 · Answer

상태관리로 처리하면 될 것 같습니다.

TeraGo · Answer

clickme: function (e) { var clickMe &#61; document.querySelectorAll('.clickMe'); if (e.target.classList.contains('active')) { e.target.classList.remove('active'); return false; } for (var i &#61; 0; i < clickMe.length; i&#43;&#43;) { clickMe[i].classList.remove('active'); } e.target.classList.add('active'); console.log(this.color); }제이쿼리의 노예로 변질되서 코드가 잘 나오지않네요..답답한 코딩중입니다. (Element) 가 여러개 있을 경우를 대비해서 만들고 있습니다.단일이면 class 바인딩 처리하면되는걸로 아는데 다수일때는 잘 안됩니다 ㅠㅠ

TeraGo · Answer

@코드17, @삼이 원하는 방법은 아니였지만 답변 감사합니다. :) 다른 방법으로 해결하였습니다 !

activeClass: function (item) { this.eraser = false; if (this.active == item) { this.active = ''; } else { this.active = item; } } 좋은방법인지는 모르겠으나 더 공부를 해야겠네요 :)

Vue에서는 addClass, removeClass 같은 기능은 없는건가요 ?

5개의 답변

Q&A 목록