jhhan의 블로그

vuetify 태그에 대해 알아보는 3번째 포스트입니다. 이번에는 tab에 대해 알아보겠습니다. 1., tab의 가장 기본적인 태그입니다. 바로 코드를 통해 살펴보겠습니다. Tab1 Tab2 Tab3 정말 간단한 tab 화면을 볼 수 있습니다. tab1, tab2, tab3를 누를 수 있습니다. 아직 내용이 뜨지는 않습니다. 이제 내용도 같이 뜰 수 있게 해보겠습니다. 2. , tab 밑에 내용을 보여줄 수 있게 합니다. {{item.name}} {{item.content}} Here, You can see Something! export default { name: 'App', data: () => ({ tab: null, items: [ { name: 'One', content: 'Tab1 Conte..

이번에도 vuetify의 태그에 대해서 알아보겠습니다. 제가 쓰면서 신기했던 그리고 자주 쓰는 부분을 위주로 진행합니다. 1. 첫번째는 v-card 태그입니다. 생각하신 대로 카드 형태를 만들어주는 태그입니다. Vue.js 예상한 카드 형태의 모양을 볼 수 있습니다. 1-1. 이름에서 알 수 있듯이 카드의 제목을 담당합니다. Title Name Vue.js 위 코드에 title 태그만 추가해 보았습니다. 제목이 나타납니다. (기본 설정이 저 정도의 제목으로 나타나는 것이므로 활용을 잘 한다면 멋진 카드를 만들 수 있을 것 같습니다.) 1-2. 역시 이름 그대로 부제목을 나타날 수 있게 해줍니다. Title Name SubTitle Vue.js 위 코드에 또 추가를 해보았습니다. 제목 밑에 부제목이 잘 나..