帮我用vue3写一个查询IP的前端页面

以下是一个简单的查询IP的前端页面示例，使用Vue 3编写：

<template>
  <div>
    <h1>查询 IP 地址</h1>
    <form @submit.prevent="submitHandler">
      <label>
        IP 地址:
        <input type="text" v-model="ip" required />
      </label>
      <button type="submit">查询</button>
    </form>
    <div v-if="result">
      <h2>查询结果:</h2>
      <p>IP 地址: {{ result.ip }}</p>
      <p>所在地: {{ result.location }}</p>
      <p>运营商: {{ result.isp }}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      ip: '',
      result: null,
    };
  },
  methods: {
    async submitHandler() {
      try {
        const response = await axios.get(`https://ipapi.co/${this.ip}/json/`);
        this.result = {
          ip: response.data.ip,
          location: `${response.data.city}, ${response.data.region}, ${response.data.country}`,
          isp: response.data.org,
        };
      } catch (error) {
        console.error(error);
        alert('查询失败，请检查输入的 IP 地址是否正确。');
      }
    },
  },
};
</script>

在这个示例中，我们创建了一个表单，用户可以输入要查询的IP地址。当用户提交表单时，我们使用axios库发起HTTP请求来查询IP地址的信息，并将结果显示在页面上。

需要注意的是，在实际使用中，可能需要对用户输入的IP地址进行验证和过滤，以防止恶意输入或无效输入。