반응형
Vue
1. data 영역 : 변수 지정
2. methods 영역 : 함수 지정
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="js/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- id 가 app 태그 안에서 작업이 이뤄짐 -->
<div id="app">
<!-- 바인딩 -->
<h1 v-if="grade >= 90" style="color:red;">A</h1>
<h1 v-else-if="grade >= 80" style="color: orange">B</h1>
<h1 v-else-if="grade >= 70" style="color:yellowgreen;">C</h1>
<h1 v-else-if="grade >= 60" style="color:green;">D</h1>
<h1 v-else style="color:blue;">E</h1>
<label>점수입력 : <input type="text"></label>
<button @click="fnAge">click</button>
</div>
</body>
</html>
<script>
var app = new Vue({
el: '#app',
data: {
grade : 100
}
, methods: {
fnAge : function() {
// <!-- 1. prompt 창에 점수를 입력하면 조건에 맞게 등급 나오기 -->
this.grade = parseInt(prompt("점수 입력 : "));
}
}
// 화면이 시작될 때 실행
, created: function () {
this.fnAge();
}
});
</script>반응형
'Java Script > Vue.js' 카테고리의 다른 글
| [Vue] Vue 복습문제 - 검색, 체크박스, 삭제 #0417수업 #2교시 (0) | 2023.04.17 |
|---|---|
| [Vue] Vue 복습문제 #0417수업 #1교시 (0) | 2023.04.17 |
| [Vue] #0414수업 #8교시 (0) | 2023.04.14 |
| [Vue] v-for #0414수업 #7교시 (0) | 2023.04.14 |
| [Vue] #list #map #0414수업 #6교시 (0) | 2023.04.14 |