반응형 Vue, 자바스크립트8 Vue에서 swiper import 할 때 1. swiper 설치npm install swiper 2. main.js에 importimport { Swiper, SwiperSlide } from 'swiper/vue';import 'swiper/swiper-bundle.css';import 'swiper/css';app.component('Swiper', Swiper);app.component('SwiperSlide', SwiperSlide); 3. 옵션 필요 시 해당 컴포넌트 파일에 importimport { Autoplay, FreeMode } from 'swiper/modules';return { modules: [Autoplay, FreeMode],} 4. 사용할 슬라이드 붙이기 Slide 1 Slide 2 Sl.. 2025. 1. 18. 정규식 이용해서 input 입력 값이 숫자만 들어가도록 년도와 월, 일은 4글자 2글자만 입력되도록 maxlength 이용 v-model로 값을 바인딩 후, watch에서 값이 변경되는 것을 체크하여 처리함. template 년 월 일 scriptexport default { data () { return { birthDt: { year: null, month: null, date: null, }, }; }, watch: { 'birthDt.year': { handler (newValue) { if(newValue !== null && newValue !== '') { this.birthDt.year = newValue.replace(/[^.. 2024. 8. 9. v-for 이용한 각 체크박스 경로 지정하기 v-for를 이용해 체크 박스와 클릭 시 경로 이동이 되도록 구현하려고 함.여기서 문제는 반복되는 태그에 각각 따로 경로를 지정해야 하는데 그 부분에 대해 기록하려고 함. vue.js {{ item }} 내용확인 scriptdata () { return { check_list: [ '(필수) 이용약관', '(필수) 개인정보 수집 동의', '(선택) 마케팅수신동의', ], };},methods: { navigateToPage (item) { if (item === '(선택) 마케팅수신동의') { alert('준비 중입니다'); } else { const pa.. 2024. 8. 8. vue js 파일을 모바일 기기로 확인하는 방법 vue 파일을 모바일 기기로 확인하는 방법이 있다.회사 컴퓨터는 셋팅이 돼있어서 몰랐는데 최근 새로 구입한 맥북은 노셋팅이라 기록하기 위해 남겨둠. 처음 npm run serve를 돌리면 이렇게 뜬다.http://0.0.0.0/ 1. 터미널에서 vue 서버 실행npm run serve -- --host 0.0.0.0 2. 로컬 IP 주소 확인Windows: `ipconfig`Mac/Linux: `ifconfig` 또는 `ip a` Windows에서는Ethernet adapter Ethernet: Connection-specific DNS Suffix . : Link-local IPv6 Address . . . . . : fe80::d4b8:4d62:3b74:fdfc%12 IPv4 Addr.. 2024. 8. 8. 이전 1 2 다음 반응형
