Vue Js Divide Two Numbers

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <h3>Vue Js Divide Two Numbers</h3>
    <div>
      Enter the first number: <input v-model="num1" type="number" />
    </div>
    <div>
      Enter the second number: <input v-model="num2" type="number" />
    </div>
    <div>
      <button @click="divideNumbers">Divide</button>
    </div>
    <p>
      Result of division: {{ result }}
    </p>
  </div>

input[type="number"] {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 16px;
      box-sizing: border-box;
    }

button {
      background-color: #007BFF;
      color: #fff;
      border: none;
      border-radius: 5px;
      padding: 10px 20px;
      cursor: pointer;
      font-size: 16px;
    }

button:hover {
      background-color: #0056b3;
    }

p {
      font-size: 18px;
      margin: 10px 0;
    }
  </style>
</body>

</html>