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

在Vue.js中创建一个包含输入城市和人名字段，并有一个提交按钮的简单界面，你可以按照以下步骤来构建：

1. **设置项目结构**：
确保已经安装了Vue CLI。在一个新项目中，创建一个名为`App.vue`的组件文件作为应用的入口。

<template>
  <div id="app">
    <form @submit.prevent="handleSubmit">
      <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 type="submit">提交</button>
    </form>
    <p>{{ message }}</p> <!-- 显示提示信息 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      city: '',
      name: '',
      message: ''
    };
  },
  methods: {
    handleSubmit(event) {
      event.preventDefault(); // 阻止表单默认提交行为
      if (this.city && this.name) { // 检查输入是否为空
        this.message = '已提交！城市：' + this.city + ', 人名：' + this.name;
      } else {
        this.message = '请输入完整的信息';
      }
    }
  }
};
</script>

<style scoped>
/* 如果需要，可以添加一些简单的样式 */
</style>

在这个例子中，`v-model`用于双向数据绑定城市和名字输入框，`@submit.prevent`事件监听表单提交并在`handleSubmit`方法中处理数据和显示提示消息。记得在实际项目中引入Vue.js库并配置路由、组件等其他部分。