uview2.0 表单上一步 下一步 实例代码

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

<template>
  <view>
    <u-form @submit="submit" :model="form">
      <u-form-group title="Basic Info">
        <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="Address">
        <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>
        </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>

在这个示例中，我们使用了 uView 2.0 的表单组件和按钮组件来实现上一步下一步功能。在表单中，我们使用了 `step` 变量来跟踪当前所在的步骤，然后在按钮的点击事件中，根据当前步骤来更新 `step` 变量的值，从而实现上一步下一步的操作。在提交表单时，我们可以使用 `submit` 事件来处理表单数据。