2022/08 3

[vue] vue 데이터피커 - bootstrap datepicker css 확인 방법(debug 속성)

많이 사용하는 datepicker 중 bootstrap datepicker가 있다. 필요한 모든 기능들이 제공되어서 꾸준히 사용하고 있는 datepicker! 📌공식사이트는 아래 링크 참고 https://getdatepicker.com/4/ https://getdatepicker.com/4/ Get awesome Dashboard Templates Looking for a template with the datepicker ready to go? Then get check out these templates from our partners. getdatepicker.com https://www.npmjs.com/package/vue-bootstrap-datetimepicker vue-bootstrap-d..

FrontEnd/Vue.js 2022.08.27

[vue] v-if 내 조건으로 filter로 데이터 변환 후 비교하기

vue.js에서 v-if 조건 중 filter를 통해 정제된 데이터 값이랑 비교하고 싶을 때가 있다. 📌v-if문 시 filter로 이용한 데이터 값 조건으로 넣어주기 v-if="$options.filters.필터명(필터파라미터)" 샘플 코드 filter를 통해서 user레벨을 확인한 뒤 그에 따른 인사말을 v-if를 이용해서 출력하는 코드이다. 로그인회원 레벨 : {{$options.filters.levelCheck(userList, loginUser.id)}} 안녕하세요! 정회원이시네요! 안녕하세요! 준회원이시네요! 만약 필터를 통해서 준회원인지 정회원인지 확인하고 그에 맞는 텍스트를 보여줘야 하는 상황이라면 회원 레벨을 체크하는 필터를 만든 뒤 v-if에서 user를 확인해서 출력된 level 값에..

FrontEnd/Vue.js 2022.08.05

[css] css :has 사용 방법 및 지원 브라우저 (특정 요소 갖는 부모 요소 찾기)

css 작성하다 보면, 자식 선택자를 선택하는 것은 매우 잘되어있는데, 부모에서 밑에 해당 자식이 있는 경우 작동하게 하는 방법이 딱히 없는 것 같아서 찾아보았다. 필요한 상황 예를 들어 ul li 구조에서 a태그 내. active 클래스가 활성화되었을 때 li 태그에 css를 주고 싶은 상황이다. 📌자식선택자 선택하기 li밑에 있는. active class를 가진 a태그에 css를 주는 것은 매우 간단하다. ul li a.active { color:skyblue; } ul 태그 안에 li태그 안에 a.active가 되어있는 태그를 찾는 방법이다. 그냥 depth순서대로 작성해주면 해당 태그를 선택해서 css를 적용할 수 있다. ✨특정 자식선택자를 가진 부모 태그 선택하기 반면 li 태그중 .acitve..

FrontEnd/css 2022.08.02