完成一个界面 有输入城市和人名 以及通过按钮提交的功能 vue3

在Vue3中创建这样一个简单的界面，你可以使用Composition API和HTML模板来构建。首先，安装Vue并设置项目。接下来，按照以下步骤操作：

1. **组件结构**:
创建一个新的Vue组件文件（如`CityNameInput.vue`），使用`.vue`扩展名。

<template>
  <div class="input-form">
    <label for="city">城市:</label>
    <input type="text" v-model="city" id="city" placeholder="请输入城市名"/>

    <label for="name">姓名:</label>
    <input type="text" v-model="name" id="name" placeholder="请输入姓名"/>

    <button @click.prevent="submitData">提交</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 创建数据属性
const city = ref('');
const name = ref('');

// 提交函数
function submitData() {
  // 这里可以根据需要处理数据，比如发送请求到服务器
  console.log('提交数据:', { city: city.value, name: name.value });
}
</script>

<style scoped>
.input-form {
  display: flex;
  gap: 10px;
}
</style>

2. **导入和使用组件**:
在你的App组件或其他父组件中引入并使用这个新创建的组件。

<template>
  <div>
    <CityNameInput />
  </div>
</template>

<script>
import CityNameInput from './CityNameInput.vue';

export default {
  components: {
    CityNameInput,
  },
};
</script>

现在你已经完成了一个基础的表单，用户可以输入城市和名字，并点击提交按钮。每次输入变化都会自动触发`v-model`绑定的更新，而提交函数会在用户点击时执行。