Vue.jsで文字数カウンターを作る

勉強がてらvue.jsを使って「文字数カウンター」を作ってみました。

仕様とコード

勉強がてらvue.jsを使って「文字数カウンター」を作ってみました。

仕様的には、入力された文字数を「空白スペースを含めた文字数」と「空白スペースを含めない文字数」の2パターンを出力するものです。「リセット」ボタンを押すと入力された文字は「クリア」されます。

Vue.jsはCDNで読み込んでいます。

≫ DEMO

コードは以下になります。

index.html（一部抜粋）

<div class="container" id="app">
        <h1>文字数カウンター</h1>
        <textarea v-model="inputText" placeholder="文字を入力してください" cols="30" rows="10" class="text-area"></textarea>
        <p class="char-box">文字数: <span>{{ textNormal }}<span></p>
        <p class="char-box">空白を除いた文字数: <span>{{ textNospace }}</span></p>
        <button @click="reset" class="btn-reset">リセット</button>
</div>

index.js（一部抜粋）

var vm = new Vue({
    el: '#app',
    data() {
      return {
        inputText: ''
      };
    },
    computed: {
      textNormal: function() {
        //console.log("SPACE : " + this.inputText.length)

        return this.inputText.length
      },
      textNospace: function() {
        var spaceText = this.inputText;
        var noSpaceText = spaceText.replace(/\s+/g,'')
        //console.log("no : " + noSpaceText.length)
        return noSpaceText.length
      }
    },
    methods: {
      reset () {
          Object.assign(this.$data, this.$options.data.apply(this));
      }
    }

  });

style.scss

body,html {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

/* body
--------------------------------*/


html {
  width: 100%;
  margin: 0 auto;
  font-size: 0.625rem;
}

body {
  width: 100%;
  background: #416daf;
  color: #000;
  font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic",
    YuGothic, "ＭＳ ゴシック", sans-serif;
  font-weight: 400;
  line-height: 1.6;
  text-align: left;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

/* style
--------------------------------*/

.inner {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

h1 {
    font-size: 3.6rem;
    color: #1d3b67;
    margin-bottom: 40px;
    letter-spacing: 0.1rem;
    text-align: center;
    line-height: 1.1;
}

.container {
    background: #fff;
    max-width: 600px;
    width: 80%;
    border-radius: 40px;
    padding: 40px 35px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: -3px 1px 17px 0px rgba(0, 0, 0, 0.04);
}

.text-area {
  width: 100%;
  max-height: 400px;
  padding: 15px;
  box-sizing: border-box;
  border-radius: 10px;
  border: none;
  background: #e0edea;
  font-size: 18px;
  color: #1d3b67;
  outline: none;
  line-height: 1.6;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  margin-bottom: 30px;
}


.char-box {
  width: 100%;
  padding: 18px 15px 15px;
  box-sizing: border-box;
  border-radius: 10px;
  font-size: 1.8rem;
  font-weight: bold;
  color: #1d3b67;
  background: #e0edea;
  span {
    font-size: 2.4rem;
  }
}

.btn-reset {
  width: 250px;
  font-size:2.0rem;
  font-weight: bold;
  color: #fff;
  background: #d7286a;
  padding: 15px 75px 13px;
  border-radius: 30px;
  border: none;
  outline: none;
  appearance: none;
  margin: 50px auto 0;
  box-shadow: -3px 1px 17px 0px rgba(0, 0, 0, 0.2);
  &:hover {
    background: #ff5b99;
  }
}

メモ

「空白スペースあり」の文字数は、入力された文字数をそのまま返しているだけです。

「空白スペースなし」の文字数は、入力されたテキストにある空白や改行を取り除いて（空白や改行を”空”に置き換えて）、その文字数を出力しています。

リセットボタンのところで、dataを初期化する方法が当初上手くいかず苦戦しました。

下記の参考サイトを見てやったらうまくいったので、とりあえずヨシ！

参考サイト

≫ Reset data in a vue component
≫ 体で覚えるVue.js - インスタンスメンバ編 〜 JSおくのほそ道 #024

Tweet