vue中input多选_vue使用element-ui的上传,input输入框,单选多选按钮等组件

1.引入element-ui --- 复选框+上传+输入框

// element-ui

import {Checkbox, Input, Upload, CheckboxGroup } from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.component( 'checkbox', Checkbox );

Vue.component( 'el-input', Input);

Vue.component( 'upload', Upload );

Vue.component( 'CheckboxGroup');

【上传组件】

upload-icon.png

{ {placeholder}}

{ {tip}}

upload-icon.png

{ {placeholder}}

{ {tip}}

accept :限制上传的文件格式

action="111":上传的接口地址,可以写在这里,但是因为在项目中直接写在这里会产生跨域的问题,所以我的接口是写在

【相关方法】࿱

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的学生注册页面的 Vue 代码,使用element-ui 组件库: ```html <template> <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm"> <el-form-item label="姓名" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="性别" prop="gender"> <el-radio-group v-model="form.gender"> <el-radio label="male">男</el-radio> <el-radio label="female">女</el-radio> </el-radio-group> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input-number v-model="form.age" :min="1" :max="100"></el-input-number> </el-form-item> <el-form-item label="专业" prop="major"> <el-input v-model="form.major"></el-input> </el-form-item> <el-form-item label="联系方式" prop="phone"> <el-input v-model="form.phone"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('form')">提交</el-button> <el-button @click="resetForm('form')">重置</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { name: '', gender: '', age: '', major: '', phone: '' }, rules: { name: [ { required: true, message: '请输入姓名', trigger: 'blur' }, { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' } ], gender: [ { required: true, message: '请择性别', trigger: 'change' } ], age: [ { required: true, message: '请输入年龄', trigger: 'blur' }, { type: 'number', message: '请输入数字', trigger: 'blur' } ], major: [ { required: true, message: '请输入专业', trigger: 'blur' }, ], phone: [ { required: true, message: '请输入联系方式', trigger: 'blur' }, { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' } ] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { // 表单验证通过,提交表单 console.log(this.form); } else { return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } }; </script> ``` 上述代码使用了 `el-form` 表单、`el-form-item` 表单项、`el-input` 输入框、`el-input-number` 数字输入框、`el-radio-group` 单框组、`el-radio` 单框、`el-button` 按组件。同时,为了方便表单验证,使用了 `rules` 属性和 `validate()` 方法。 希望这个示例能够对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值