Vue uView 框架：带头像上传和下拉框的表单组件示例

<template>
  <form>
    <div class='form-group'>
      <label for='avatar'>头像</label>
      <input type='file' id='avatar' @change='handleAvatarChange' required>
    </div>
    <div class='form-group'>
      <label for='name'>姓名</label>
      <input type='text' id='name' v-model='name' required>
    </div>
    <div class='form-group'>
      <label for='age'>年龄</label>
      <input type='number' id='age' v-model='age' required>
    </div>
    <div class='form-group'>
      <label for='gender'>性别</label>
      <select id='gender' v-model='gender' required>
        <option value=''>请选择</option>
        <option value='male'>男</option>
        <option value='female'>女</option>
      </select>
    </div>
    <div class='form-group'>
      <label for='interests'>兴趣爱好</label>
      <select id='interests' v-model='interests' multiple required>
        <option value=''>请选择</option>
        <option value='reading'>阅读</option>
        <option value='traveling'>旅游</option>
        <option value='sports'>运动</option>
      </select>
    </div>
    <button type='submit' @click.prevent='submitForm'>提交</button>
  </form>
</template>
<script>
export default {
  data() {
    return {
      name: '',
      age: null,
      gender: '',
      interests: []
    }
  },
  methods: {
    handleAvatarChange(event) {
      // 处理头像上传
    },
    submitForm() {
      // 校验表单
      if (!this.name || !this.age || !this.gender || !this.interests.length) {
        alert('请填写完整信息')
        return
      }
      // 提交表单
    }
  }
}
</script>