Directive on Vue


1. v-text

<script>
export default {
data: function() {
return {
channel : "왕초보 홈페이지 만들기",
subscribe: 2677,

}
},


}
</script>

<template>
<h1 v-text="channel"></h1>        //you can show data using "v-text" attribute on Vue
<h1 v-text="subscribe"></h1>


</template>


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


2. "v-if" and "v-show"

<script>
export default {
data: function() {
return {
score : 75

}
},


}
</script>

<template>
<h1 v-if="score >= 90">result : A</h1>        //Show data after judging if condition
<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>        //'v-show' is visible only when condition is true
//'v-show' has space when if condition is false

</template>


Result of code:


3. v-for

<script>
export default {
data: function() {
return {
score : 75,
sports: [
'Baseball',
'Football',
'Volleyball',
'Swimming',
],
}
},


}
</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>    //show array data using 'v-for'
</ul>


</template>


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



4. v-on

<script>
export default {
data: function() {
return {
score : 75,
sports: [
'Baseball',
'Football',
'Volleyball',
'Swimming',
],
count: 0,
}
},


}
</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="count++">숫자 증가</button>    //add click attribute using 'v-on'
<button v-on:click="count--">숫자 감소</button>


</template>


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