NEW ARTICLE
WinSCP 現在のディレクトリをブックマークするショートカットキー
  1. HOME
  2. Vue.js
  3. Vue.js フォームに入力文字数制限をかける

Vue.js フォームに入力文字数制限をかける

Vue.js フォームに入力文字数制限をかける

Vue.jsで、フォームに入力文字数制限をかける手順を記述してます。

目次

環境

  • OS  CentOS Stream release 8
  • vue 3.0.0
  • node v14.15.1
  • yarn 1.22.4
  • @vue/cli 4.5.9

入力文字数制限

以下のコードのようにwatchを使用して、値を監視して制限を行います。
※ここでは3文字に制限してます

<template>
  <div class="hello">    
    <input type="text" v-model="str">    
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      str: ""
    };
  },
  watch: {
    str: function(newVal) {
      this.str = newVal.length > 3 ? newVal.slice(0, -1) : newVal;
    }
  }
}
</script>

実行結果