vue.jsでツイッターみたいに文字カウントして、超過したらアラートを出す

See the Pen
vue.js as like tweet by fddcddhdd (@fddcddhdd)
on CodePen.

codepenって動作デモを埋め込めるのを使ってみたけど、有料化とかサービス中止になった時の事を考えて、ブログにもソースを書いておこう

<html>
<head>
  <title>文字数カウント</title>
</head>

<body>
  <!-- CDNからのVueライブラリの読み込み -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
  
  <!-- idでもclassでもnameでも好きなセレクタでいいけど、通常はid=app -->
  <div id="app_test">
    <!-- {{変数名}} で値を表示 -->
    <p>文字数: {{tweet.length}}/10</p>
    <!-- v-modelディレクティブ -->
    <textarea v-model="tweet"></textarea>
    
    <!-- v-ifディレクティブ -->
    <p v-if="tweet.length > 10">
      文字数制限オーバー
    </p> 
  </div>


  <script>
    // Vueインスタンスの作成
    new Vue({
      el: "#app_test",  // この要素に出力
      data() {     // 変数を定義＆初期化
        return {
          // 変数名: 値
          tweet: "さえずるな！",
        }
      }
    })
  </script>
</body>
</html>

<html>

<head>

<title>文字数カウント</title>

</head>

<body>

<p>文字数: {{tweet.length}}/10</p>

文字数制限オーバー

</p>

</div>

// Vueインスタンスの作成

new Vue({

el: "#app_test", // この要素に出力

data() { // 変数を定義＆初期化

return {

// 変数名: 値

tweet: "さえずるな！",

}

})

</script>

</body>

</html>

関連記事