본문 바로가기

Framework/Vue2

[ Vue2 ] 08. Vue 조건문 처리

<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<div id="app">
<template v-if="number === 1">
    <div>1</div>
</template>
<template v-else-if="number === 2">
    <div>2</div>
</template>
<template v-else="number === 3">
    <div>3</div>
</template>
<button @click="inc">클릭</button>
</div>
<script>
new Vue({
    el: '#app',
    data: {
        number: 1
    },
    methods: {
        inc() {
            this.number++;
        }
    }
})
</script>

'Framework > Vue2' 카테고리의 다른 글

[ Vue2 ] 09. Vue 반복문 처리  (0) 2024.11.08
[ Vue2 ] 08. Vue 토글 처리  (0) 2024.11.08
[ Vue2 ] 07. Vue 클래스 & 스타일 바인딩  (0) 2024.11.08
[ Vue2 ] 06. Vue Watch 속성  (0) 2024.11.08
[ Vue2 ] 05. Vue Computed 속성  (0) 2024.11.08