"methods" option on Vue


1. methods option

<script>
export default {
data: function() {
return {
score : 75,
sports: [
'Baseball',
'Football',
'Volleyball',
'Swimming',
],
count: 0,
}
},
methods: {        //define methods to manipulate data
increment() {
this.count++
},
decrement() {
this.count--
},
}

}
</script>

<template>
<h1 v-if="score >= 90">result : A</h1>
<h1 v-else-if="score >= 80">result : B</h1>
<h1 v-else-if="score >= 70">result : C</h1>
<h1 v-else>result : F</h1>

<h1 v-show="score == 75">Score is 75</h1>

<ul>
<li v-for="sport in sports">{{ sport }}</li>
</ul>

<p>{{ "count : " + count }}</p>
<button v-on:click="increment">숫자 증가</button>    //match method with button click event
<button v-on:click="decrement">숫자 감소</button>


</template>


<style>
#display {
width: 200px;
height: 200px;
background: goldenrod;
}
</style>