vue関数を呼出す方法

プログラミング

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

関数の呼び出す記述

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

もしくは

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

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

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

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

vueの記述

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

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

内容としてはボタンがクリックされたときに、変数「num」の値に対してプラス1するか、マイナス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>
プログラミング
スポンサーリンク
スポンサーリンク
e-logsをフォローする
スポンサーリンク
eLogs

コメント

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