반응형 VUE4 vue3 js 목록에서 마우스 오버 시 글자, 버튼 등 나타나게 vue.js 에서 목록에서 Loop 문에서 아이템에 마우스 오버 시 글자 나타나게 하는 방법을 알려드립니다.소스를 보면 아주 간단합니다.loop 의 key 값을 비교해서 보이게 안보이게 처리하는 것이 특징이며,v-bind:key 값을 index 로 사용해도 됩니다. CSS로 처리하는 방법도 있지만, 이렇게 하는 것이 더 편하니 꼭 기억해서 사용하시기 바랍니다.createApp({ setup() { const action = ref(null); const resultData = ref([{id:1,name:'실행'},{id:2,name:'취소'}]); onMounted(() => { }) return { action, .. 2024. 3. 25. 뷰3 스타일 클래스 인라인 바인딩 (Vue.js 3 Style Class inline Binding) Vue.js 에서 리스트 항목을 표시할 때 반복문을 사용하게 되는데, 특정 조건에 따라서 글자색, 배경색 등 style class 를 변경해야 하는 경우가 많습니다. 여러가지 방법이 많지만 이번에는 if 인라인 형태로 쉽게 처리하는 방법을 설명하겠습니다. Vue.js 3 클래스 인라인 바인딩 {{item.Result}} 위의 코드는 dataLists 반복하면서 Result 값이 합격일 경우 span 태그에 추가하는 방법입니다. 저 또한 이렇게 간단한 방법도 생각이 나지 않아서 방법을 설명해 드립니다. 2024. 3. 19. Vue js 3, v-html button click event 처리 (버튼 클릭 이벤트) 최근 프로젝트에 Vue.js 3 버전을 사용 중인데, v-html 을 이용해서 html 태그가 포함된 문자열을 반환 중 Button Click 버튼 클릭 이벤트를 처리야햐 하는 경우가 발생해서 제가 처리했던 방안을 알려드립니다. 버튼 클릭 시 해당 버튼의 페이지 값을 Parameter 로 전달하하는 간단한 방법입니다. Button에 data-page attribute 활용하여 Parameter 전달 클릭 이벤트를 Parent div 에 적용 클릭 이벤트 리스너를 통해서 dataset 의 page 값 가져와서 특정 함수에 전달 다른 방법도 있는 것 같지만 간단하게 처리하는 것에는 적합한 것 같아서 알려드립니다. 2024. 2. 26. 영화진흥위원회 오픈API 활용 C#, .net 8.0, MVC, Vue.js 이번 게시물에서는 백엔드(Backend) C# .net 8.0 MVC 패턴과 프론트엔드(Frontend) Vue.js 3.0 버전을 활용한 영화진흥위원회 오픈 API 활용 예제를 설명하겠습니다. 네이버에서 영화 관련 API 를 제공하였으나 2023년 3월 31일에 종료되어서 영화진흥위원회에서 제공하는 API가 좋은 대안이 될 수 있습니다. 영화진흥위원회 오픈API 활용 1. 영화진흥위원회 API 신청 https://www.kobis.or.kr/kobisopenapi https://www.kobis.or.kr/kobisopenapi/ www.kobis.or.kr 우선, 영화진흥위원회 API 사이트 회원 가입 후, 상단의 "키 발급/관리"를 통해서 API에 사용할 키를 발급받아야 합니다. 현재, 1계정당 2.. 2024. 2. 20. 이전 1 다음 반응형
