Vue js Check Input Contains Number

<!DOCTYPE html>
<html>

<body>
  <div id="app">
    <h3>Vue js Check Input Contains Number</h3>
    <input v-model="inputText" @input="checkForNumber" />
    <p v-if="containsNumber" class='p-valid'>Input contains a number.</p>
    <p v-else class="p-invalid">Input does not contain a number.</p>
  </div>
  <script type="module">
    const app = Vue.createApp({
      data() {
        return {
          inputText: '',
          containsNumber: false,
        };
      },
      methods: {
        checkForNumber() {
          // Use JavaScript string methods to check if the input contains a number
          this.containsNumber = /[0-9]/.test(this.inputText);
        },
      },
    });
    app.mount("#app");
  </script>

h3 {
      font-size: 24px;
      margin-bottom: 20px;
    }

input {
      width: 300px;
      padding: 10px;
      border: 2px solid #3498db;
      border-radius: 5px;
      font-size: 16px;
      outline: none;
      transition: border-color 0.3s ease;
    }

/* Style the input when it's focused */
    input:focus {
      border-color: #2ecc71;

}

p {
      font-size: 18px;
      margin-top: 10px;
    }

.p-valid {
      color: #28a745;
      /* Green color for valid input */
    }

.p-invalid {
      color: #dc3545;
      /* Red color for invalid input */
    }
  </style>
</body>

</html>