表单 - form

示例

用户名

密码

选择

OFF

性别

男 女

爱好

足球 篮球 羽毛球 乒乓球

提交

取消

提示

提交成功

确定

代码

点击查看源码

<template>
  <div class="container">
    <van-form :model="form">
      <van-form-item label="用户名">
        <van-input placeholder="请输入用户名" v-model="form.username" clearable></van-input>
      </van-form-item>
      <van-form-item label="密码">
        <van-input placeholder="请输入用密码" v-model="form.password" show-password></van-input>
      </van-form-item>

      <van-form-item label="选择">
        <van-switch v-model="form.active"></van-switch>
      </van-form-item>
      <van-form-item label="性别">
        <van-radio-group v-model="form.gender">
          <van-radio label="男"></van-radio>
          <van-radio label="女"></van-radio>
        </van-radio-group>
      </van-form-item>
      <van-form-item label="爱好">
        <van-checkbox-group v-model="form.type">
          <van-checkbox label="足球" name="type"></van-checkbox>
          <van-checkbox label="篮球" name="type"></van-checkbox>
          <van-checkbox label="羽毛球" name="type"></van-checkbox>
          <van-checkbox label="乒乓球" name="type"></van-checkbox>
        </van-checkbox-group>
      </van-form-item>
      <van-form-item label=''>
        <van-button type='primary' @click='onSubmit'>提交</van-button>
        <van-button>取消</van-button>
      </van-form-item>
       <van-form-item>
        <van-dialog :visible.sync="form.dialogVisible">
          <template v-slot:title></template>
          <h3>提交成功</h3>
          <template v-slot:footer>
            <van-button plain type="primary" @click="form.dialogVisible = false">确定</van-button>
          </template>
        </van-dialog>
      </van-form-item>
    </van-form>
    </van-form>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: "App",
  data() {
    return {
      form: {
        dialogVisible:false,
        username: "",
        password: "",
        active: true,
        type: [],
        gender: "",
      },
    };
  },
  methods: {
    onSubmit() {
      console.log(this.form);
    },
  },
};
</script>

<style lang="scss" >
.van-button {
  margin: 5px;
}
</style>