-
Vue.js 프레임워크 데이터 바인딩 조건문 if 반복문 for개발 공부/PWA 2023. 9. 13. 16:05반응형
- Vue.js , Vuetify.js란?
- 기본 구조
- 단방향 바인딩과 v-Bind 디렉티브
- 양방향 바인딩과 v-model 디렉티브
- 조건문
- 반복문
- 이벤트핸들러, on
조건문 v-if
vue.js의 조건문은 if뿐, 삼항 연산자 없음
<body> <div id="app"> <h1>{{ bFlag }}</h1> <p v-if="bFlag == true">참</p> <!-- bFlag 데이터에 접근하여 조건 판단 --> <p v-else>거짓</p> </div> <script> let app = new Vue({ el: '#app', data: { bFlag: Math.random() > 0.5 // 랜덤값(0~1)을 발생시켜 0.5와 비교 } }) </script> </body>
반복문 v-for
반복문은 for문만 있음 while문 없음
<body> <div id="main"> <h1>과일 리스트</h1> <ol> <!-- aFruits 과일 배열 데이터 가져옴 --> <li v-for="item in aFruits"> {{ item.sFruitName }} <!-- aFruits 배열 항목 하나씩 html로 렌더링 함--> </li> </ol> </div> <script> var main = new Vue({ el: '#main', data: { //과일 배열 정의 aFruits: [ { sFruitName: '망고' }, { sFruitName: '파인애플' }, { sFruitName: '딸기' } ] } }) </script> </body>- 숫자 나오는 이유 : <ol> 태그는 순서가 있는 태그라서
이벤트 실행 v-on
이벤트 핸들러로 vue 메서드 실행
<body> <div id="app"> <h1>{{ sTitle }}</h1> <!-- 버튼 눌리면 fnChangeTitle 메서드 실행 --> <button v-on:click="fnChangeTitle">눌러주세요</button> </div> </body> <script> new Vue({ el: '#app', data: { sTitle: '일번!' }, methods: { // 버튼 누르면 sTitle의 제목 변경 fnChangeTitle() { this.sTitle = '이번!' // this-> Vue 객체 인스턴스 } } }); </script>버튼 클릭 전 버튼 클릭 후 반응형'개발 공부 > PWA' 카테고리의 다른 글
Vue.js 프레임워크로 PWA 만들고 실행하기 (0) 2023.09.20 Vue js SPA 프로젝트 생성 및 실행하기, node js 설치 (0) 2023.09.19 Vue.js 기초 문법 데이터 바인딩 v-Bind v-model (0) 2023.09.13 Vue.js 프레임워크를 이용한 PWA - 뷰 시작하기, 기초 문법 (0) 2023.09.13 javascript 모듈 사용법 import, export 방법 실습 예제 (0) 2023.02.21
