[vue] selectbox default 값 지정하는 방법 (v-model)
·
과거의 이력/Vue.js
vue.js에서 v-model을 사용하여 셀렉스박스를 생성할때, 'default' 또는 'checked'와 같은 속성은 무시된다. (아래 글 참고) 때문에 디폴트 값은 해당 속성을 사용하는것이 아닌, v-model에 값을 할당하여 디폴트값을 지정해주는 방식으로 사용되어야 한다. 🎵 예시코드 /** template */ {{ list.text }} /** 변수 */ sampleList = [{ text: '선택', value: 0 }, { text: '정민', value: 1 }] // 셀렉트박스 리스트 sampleModel = 1 // 1로 하면 '정민'이라는 리스트가 선택됨 만약 기본으로 선택 을 선택하고 싶다면, 예시코드 기준으로 v-model 값에 0을 할당해주면 된다!
[CSS] selectBox 화살표 바꾸기
·
과거의 이력/HTML_CSS
selectBox 화살표 디자인을 없앤 후, 내가 원하는 svg 이미지를 배경으로 설정하는 방식으로 변경할 수 있다. 1. selectBox 화살표 없애기 selectbox style에 해당값을 부여하여 디자인 속성을 없앤다. appearance:none; 2. 화살표 svg 이미지 삽입하기 background 속성으로 화살표 이미지를 추가한다. 이미지는 url로 삽입하며 상대경로를 활용하여 이미지 경로를 추가한다. 아이콘 반복형식으로 배경이 지정되지 않도록 no-repeat 속성을 함께 부여한다. 또한 아이콘 위치 및 크기를 함께 정의하면 끝! background:url('../icon/my-arr.svg') no-repeat 97% 50%/20px;