v- if와 v-else는 근접해야하며
v - 로 표시되는 형태 안에는 조건및 자바스크립트 문법이 사용가능하다
간단한 if else문을 v-형태를 사용해서 바로바로 적용 가능하다
스크립트부분
el: element 줄임말로 el, data, methods 는 지정된 예약어로써 변경이 불가능하나
그 안에 들어가는 것들은 모두 변수및 함수이기때문에 변경이 가능하다.
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>좋아요</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<div v-if="liked">좋아요 눌렀음</div>
<!-- <div> if else가 붙어있지 않으면 if else 둘다 나오지 않는다.</div> -->
<button v-else v-on:click="onClickButton">like</button>
</div>
</body>
<script>
const app = new Vue({
el: '#root',
data: {
liked: false,
},
methods: {
onClickButton() {
this.liked = true;
},
},
});
</script>
</html>
'Vue > vue 기초 공부하기' 카테고리의 다른 글
| vue 기초 - 끝말잇기 만들기 (0) | 2020.01.05 |
|---|---|
| vue 구구단 만들기, ref 활용하기 (0) | 2020.01.05 |
| Vue 컴포넌트 만들기 (0) | 2019.12.22 |
| Vue 기초(cdn 활용및 v-bind, v-if, v-for, v-on, v-model 사용하기 ) (0) | 2019.12.21 |
| Vue 공부하기 (0) | 2019.12.21 |
