MENU
  1. ホーム
  2. JS
  3. Vue.js
  4. number修飾子

number修飾子

Vue.js
2024.05.31

number修飾子は、v-modelディレクティブに付加することで、ユーザー入力を数値として自動的に変換します。
※数値入力の処理が簡素化

number修飾子
記法

v-model.number=”データプロパティ名”

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue 3のnumber修飾子について</title>
  </head>
  <body>
    <div id="app">
      <p>number修飾子の例</p>
      <label for="number_input_with_modifier"
        >数値を入力してください (修飾子あり):</label
      >
      <input
        id="number_input_with_modifier"
        type="text"
        v-model.number="userInputWithModifier"
      />
      <p>入力された値 (修飾子あり): {{ userInputWithModifier }}</p>
      <p>型 (修飾子あり): {{ typeof userInputWithModifier }}</p>
      <p>数値を2倍にした値 (修飾子あり): {{ doubledValueWithModifier }}</p>

      <hr />
      <p>number修飾子がない例</p>
      <label for="number_input_without_modifier"
        >数値を入力してください (修飾子なし):</label
      >
      <input
        id="number_input_without_modifier"
        type="text"
        v-model="userInputWithoutModifier"
      />
      <p>入力された値 (修飾子なし): {{ userInputWithoutModifier }}</p>
      <p>型 (修飾子なし): {{ typeof userInputWithoutModifier }}</p>
      <p>値を2倍にした値 (修飾子なし): {{ doubledValueWithoutModifier }}</p>
    </div>

    <!-- CDN -->
    <script src="CDNのURL"></script>
    <script src="./main.js"></script>
  </body>
</html>
// Vueアプリケーションの作成とマウント
const app = Vue.createApp({
  data() {
    return {
      userInputWithModifier: 0, // 修飾子ありのユーザー入力
      userInputWithoutModifier: "", // 修飾子なしのユーザー入力
    };
  },
  computed: {
    doubledValueWithModifier() {
      return this.userInputWithModifier * 2; // 修飾子ありの入力値を2倍にする計算
    },
    doubledValueWithoutModifier() {
      // 修飾子なしの入力値を2倍にする計算（数値変換を試みる）
      return Number(this.userInputWithoutModifier) * 2;
    },
  },
}).mount("#app");
出力結果

number修飾子の例

入力された値 (修飾子あり): {{ userInputWithModifier }}

型 (修飾子あり): {{ typeof userInputWithModifier }}

数値を2倍にした値 (修飾子あり): {{ doubledValueWithModifier }}

number修飾子がない例

入力された値 (修飾子なし): {{ userInputWithoutModifier }}

型 (修飾子なし): {{ typeof userInputWithoutModifier }}

値を2倍にした値 (修飾子なし): {{ doubledValueWithoutModifier }}

Vue.js