Vue Js Button :disabled multiple conditions

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <h3>Vue Js Button :disabled multiple conditions</h3>
    <input type="text" v-model="username" placeholder="Username">
    <input type="password" v-model="password" placeholder="Password">
    <button :disabled="isButtonDisabled">Submit</button>
  </div>

// Disable the button if the password is less than 6 characters
          if (this.password.length < 6) {
            return true;
          }

// Disable the button if any other custom condition is met
          // For example, you can add additional validation checks here

return false; // Enable the button if none of the conditions are met
        }
      }
    });
    app.mount('#app');
  </script>

/* CSS for the heading */
    h3 {
      margin-bottom: 10px;
    }

/* CSS for the input fields */
    input[type="text"],
    input[type="password"] {
      width: 100%;
      padding: 10px;
      margin-bottom: 10px;
    }

/* CSS for the submit button */
    button {
      padding: 10px 20px;
      background-color: #4caf50;
      color: #fff;
      border: none;
      cursor: pointer;
    }

button:disabled {
      background-color: #ccc;
      cursor: not-allowed;
    }
  </style>
</body>

</html>