Help us understand the problem. What is going on with this article?

【Vue.js】カウンター作成記録

はじめに

vueの練習したいけど何を作ればいいのか。
そうだ、カウンターを作ろう。

とりあえず作った


カウンター (2).png

コード

counter.html
<template>
  <div>
    <b-button v-on:click="countUp" variant="success">カウントアップ</b-button>
    <b-button v-on:click="countDown" variant="primary">カウントダウン</b-button>
    <b-button v-on:click="countClear" variant="danger">カウントクリア</b-button>
    <h1>{{displayCount}}</h1>
    <div v-if="displayCount > 10">
      {{successCount()}}
    </div>
  </div>
</template>
counter.js
<script>
export default {
  data() {
    return {
      displayCount: 0
    };
  },
  methods: {
    countUp() {
      this.displayCount++;
    },
    countDown() {
      this.displayCount--;
    },
    countClear() {
      this.displayCount = 0;
    },
    successCount() {
      alert('great!!')
    }
  }
};
</script>

さいごに

マウスをカチカチするだけでも楽しくなっちゃう自分としては
かなり良い暇つぶしグッズを作ってしまった。
vue.jsで作った意味があるのかわからない感じだけど、記法とかをおぼえる練習としては良かったかな。
ここまで読んでくれた方ありがとうございました!

おまけ

下記のリンクで遊べます。
ちなみにCodeSandboxはかなり優秀な開発環境ですので是非使ってみてほしいです。
https://codesandbox.io/s/counter-practice-xlquf

shinju2024
趣味で遊んでます。。。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away