uview2.0 表单上一步 下一步 总共2步 并提交实例代码

以下是 uView 2.0 表单上一步下一步并提交的实例代码：

<template>
  <view>
    <u-form @submit="submit" :model="form">
      <u-form-group title="Step 1">
        <u-input v-model="form.name" label="Name" placeholder="Please enter your name"></u-input>
        <u-input v-model="form.email" label="Email" placeholder="Please enter your email"></u-input>
      </u-form-group>
      <u-form-group title="Step 2">
        <u-input v-model="form.street" label="Street" placeholder="Please enter your street"></u-input>
        <u-input v-model="form.city" label="City" placeholder="Please enter your city"></u-input>
        <u-input v-model="form.state" label="State" placeholder="Please enter your state"></u-input>
        <u-input v-model="form.zip" label="Zip" placeholder="Please enter your zip"></u-input>
      </u-form-group>
      <u-form-group>
        <view style="display: flex; justify-content: space-between;">
          <u-button @click="prev" :disabled="step === 0">Prev</u-button>
          <u-button @click="next" :disabled="step === 1">Next</u-button>
          <u-button type="primary" native-type="submit">Submit</u-button>
        </view>
      </u-form-group>
    </u-form>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          name: '',
          email: '',
          street: '',
          city: '',
          state: '',
          zip: ''
        },
        step: 0
      }
    },
    methods: {
      prev() {
        this.step--
      },
      next() {
        this.step++
      },
      submit() {
        console.log(this.form)
        // 这里可以将表单数据提交到后端服务器
      }
    }
  }
</script>

在这个示例中，我们在表单组件中添加了一个提交按钮，并使用 `native-type="submit"` 将其设置为原生的提交类型。在 `submit` 方法中，我们可以通过 `console.log` 来查看表单数据，并且将其提交到后端服务器。