개발/Vue10 Vue(version 3) 주요 기능 정리(v-model) #5 주요 기능 정리 #4에서는 input type=text일 때 v-model을 사용했을 경우에 대해서 알아봤다. 이번 주제는 input type=checkbox, type=radio 에 대해서 알아보고자 한다. 커피 차 물 유리컵 일회용컵 텀블러 const isUse = ref(false) const selectedList = ref([]) const choiceValue = ref('Cup') 1번째 예제는 v-model을 boolean으로 사용가능하다는 예제이다. 물론 string 도 가능하다. 2번째 예제는 한개의 변수에 여러개의 Array 형태로 사용이 가능하다는 예제이다. 예제에서는 string Array를 사용하였지만, object Array 로도 사용이 가능하다. 3번째는 라디오 버튼의 예제이.. 2024. 2. 2. Vue(version 3) 주요 기능 정리(v-model) #4 v-model 의 기능을 소개해 보고자 합니다. 일단 vuejs를 쓰는 이유중에 하나 이기도 한 v-model은 입력 Element와 밀접한 관련이 있다. 주로 Input 에 사용하기 때문이다. 그리고 REST Api와도 관련이 있을 것이다. 이 페이지에서는 v-model을 input text에서 사용하는 법을 적어본다. const id = ref('') let vueLessId: string | null = '' // 입력 이벤트 const eventInput = (payload: Event) => { const target = payload.target as HTMLInputElement if (/(&#@)/.test(target.value)) { alert('특수문자 안돼~') } vueLessId.. 2024. 1. 28. Vue(version 3) 주요 기능 정리(v-for) #3 vuejs 기능 중 v-for에 대한 기능을 설명합니다. v-for는 반복되는 Element를 구성할 때 자주 사용되는 기능입니다. {{ user.name }} {{ user.email }} interface User { id: string name: string email: string } const UserList = reactive([ { id: 'test1', name: '테스트1', email: 'test1@test.com' }, { id: 'test2', name: '테스트2', email: 'test2@test.com' }, { id: 'test3', name: '테스트3', email: 'test3@test.com' } ]) 위 처럼 template 태그를 사용할 수 있고, 아니면 실제 태.. 2024. 1. 28. Vue(version 3) 주요 기능 정리(v-if, v-show) #2 이번에는 v-if와 v-show를 기능을 소개하겠습니다. 코딩을 해본 사람들은 이 기능에 익숙할 것으로 보입니다. 이 기능은 해당 컴포넌트나, Element 를 보이거나 숨길 경우 사용합니다. const isShow = ref(false) let isUserView: boolean = false const ShowElement = (): boolean => { return isShow.value } const CalcUserView = computed((): boolean => { return isUserView }) 위 처럼 조건자, 메소드, 반응형 변수에 사용이 가능합니다. 메소드로 지정되어 있으면, 최초 랜더링 될 때, 한번 체크를 하고, 조건자가 반응형 변수이거나 computed를 사용할 경우 변.. 2024. 1. 26. 이전 1 2 3 다음 반응형
