カウントアップする機能のサンプルコード

ボタンを押すと数字を1つ足すサンプルコードです。

ボタンを押すとカウントアップする機能の概要

カウントアップの機能に必要な仕組みは以下です。

• ボタンを押す機能
• 数字を1つずつ足す機能
• 数字を反映させる機能

実際のサンプルはこちら

VueとFirebaseコード集｜あめねこサンプルコード集

VueとFirebaseのサンプルコードに特化したサイト。あめねこサンプルコード集では、一つのページで動作確認とサンプルコードが閲覧ができるため初心者や入門者にもわかりやすくなっています。

code.ameneko.com

サンプルコード

<template>
    <div class="button_parts_count_up">
        <button @click="countUp">カウントアップ</button>
        <p>数字：{{count}}</p>
    </div>
</template>

<script>
export default {
    data(){
        return{
            count: 0
        }
    },
    methods:{
        countUp(){
            this.count = this.count + 1
        }
    }
}
</script>

<style scoped>
</style>

解説

<button @click="countUp">カウントアップ</button>

@clickで、countUpメソッドを呼び出します。

<p>数字：{{count}}</p>

{{count}}で、countの数字をバインディングしています。

    data(){
        return{
            count: 0
        }
    },

ここに変数を入れています。最初はcountを0に設定しています。

    methods:{
        countUp(){
            this.count = this.count + 1
        }
    }

先ほどの@clickが実行されたときの処理です。

countにプラス1をしています。

以上です。

Vue.jsなら非常にシンプルに実装できることがわかっていただけたと思います。