vue関数を呼出す方法

今回はボタンを押したときに関数を呼び出す方法についいて解説していきます。

関数の呼び出す記述

<button @click="関数名">ボタン</button>

もしくは

<button v-on:click="関数名">ボタン</button>

これでボタンを押したときに関数を呼び出すことができます。

個人的には、最初の記述のほうがスッキリしているので好きですね！

今回はカウントアップの関数を作成しました。

vueの記述
HTML(pug)の記述
1. pug
2. html
全体のコード

vueの記述

<script>
  export default {
    data() {
      return {
        num: 0,
      }
    },
    methods: {
      plusBtn() {
        this.num += 1
      },
      minusBtn() {
        this.num -= 1
      },
    },
  }
  </script>

今回は、カウントアップの関数「plusBtn()」、カウントダウンの関数「minusBtn()」という簡単な関数を準備しました。

内容としてはボタンがクリックされたときに、変数「num」の値に対してプラス1するか、マイナス１するかといったないようです。

HTML(pug)の記述

pug

.page-countup
  h1 カウントアップデモ
  .content
    .minus_button(@click="minusBtn()")
    input(type="number" v-model="num" min="0" max="50" )
    .plus_button(@click="plusBtn()")
  .value {{ num }}

html

<div class="page-countup">
    <h1>カウントアップデモ</h1>
    <div class="content">
        <div class="minus_button" @click="minusBtn()"></div>
        <input type="number" v-model="num" />
        <div class="plus_button" @click="plusBtn()"></div>
    </div>
    <div class="value">{{ num }}</div>
</div>

呼び出しを行いたい部分で、「@click」を使って関数を呼び出します。

@click="minusBtn() // マイナス
  
@click="plusBtn() // プラス

全体のコード

<template lang="pug">
    .page-countup
      h1 カウントアップデモ
      .content
        button.minus_button(ref="mBtn" @click="minusBtn()")
        input(type="number" v-model="num")
        button.plus_button(ref="pBtn" @click="plusBtn()")
      .value {{ num }}
  </template>
  
  <script>
  export default {
    data() {
      return {
        num: 0,
      }
    },
    methods: {
      plusBtn() {
        this.num += 1
      },
      minusBtn() {
        this.num -= 1
      },
    },
  }
  </script>