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

vue
スポンサーリンク

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

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

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

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

実際のサンプルはこちら

サンプルコード

<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なら非常にシンプルに実装できることがわかっていただけたと思います。

コメント

タイトルとURLをコピーしました