uview form 表单使用
uview是一个基于Vue.js的组件库,其中包含了一些非常实用的表单组件。以下是一些 uview form 表单组件的使用方法:
1. u-form 表单
u-form 是一个包含了多个表单控件的容器,可以方便地对表单数据进行管理和提交。以下是 u-form 的基本使用方法:
1)在页面中引入 u-form 组件:
```html
<template>
<u-form>
</u-form>
</template>
<script>
import { uForm } from 'uview';
export default {
components: {uForm},
data() {
控件的使用 return {
formData: {} // 表单数据
}
}
}
</script>
```
2)在表单控件上使用 v-model 绑定表单数据:
```html
<u-form>
<u-input title='用户名' v-model='formData.username'></u-input>
<u-input title='密码' type='password' v-model='formData.password'></u-input>
</u-form>
```
3)在提交表单时,可以使用 u-form 的 submit 方法:
```js
methods: {
onSubmit() {
this.$refs.form.submit(data => {
// 处理表单数据
});
}
}
```
2. u-input 输入框
u-input 是一个通用的输入框组件,可以用于输入文本、数字、密码等。以下是 u-input 的基本使用方法:
1)在页面中引入 u-input 组件:
```html
<template>
<u-input title='用户名' v-model='formData.username'></u-input>
</template>
<script>
import { uInput } from 'uview';
export default {
components: {uInput},
data() {
return {
formData: {} // 表单数据
}
}
}
</script>
```
2)可以通过设置 type 属性,来控制输入框的类型:
```html
<u-input title='密码' type='password' v-model='formData.password'></u-input>
<u-input title='数字' type='number' v-model='formData.number'></u-input>
```
3)可以通过设置 placeholder 属性,来设置输入框的提示文字:
```html
<u-input title='用户名' placeholder='请输入用户名' v-model='formData.username'></u-input>
```
3. u-radio 单选框
u-radio 是一个单选框组件,可以让用户从多个选项中选择一个。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论