微信小程序uni-app:常用Form表单组件使用示例

目录

    • [input 输入框](#input 输入框)
    • [picker 选择器](#picker 选择器)

input 输入框

html 复制代码
<input
  class="input-class"
  type="text"
  v-model="value"
  placeholder-class="placeholder-class"
  placeholder="请输入"
/>

picker 选择器

html 复制代码
<picker
  @change="handleChange"
  :value="index"
  range-key="label"
  :range="options"
>
  <view>{{ options[index]?.label }}</view>
</picker>
js 复制代码
{
    data(){
        return {
            index: 0,

            options: [
              {
                value: 1,
                label: '顺丰',
              },
              {
                value: 2,
                label: '圆通',
              },
            ]
        }
    },

    methods: {
        handleChange(e) {
            this.index = e.detail.value
        }
    }
}
相关推荐
fionlsq11 小时前
uniapp集成原生安卓开发的插件
android·uni-app·小组件
狂团商城小师妹12 小时前
JAVA露营基地预约户外露营预约下单系统小程序
java·开发语言·微信小程序·小程序
奶糖 肥晨13 小时前
Uniapp 开发中遭遇「可选链赋值」语法陷阱:一次编译错误排查实录
javascript·vue.js·uni-app
知识分享小能手14 小时前
微信小程序入门学习教程,从入门到精通,微信小程序页面制作(2)
前端·javascript·学习·微信小程序·小程序·前端框架·notepad++
说私域14 小时前
情绪点设置在开源AI大模型驱动的S2B2C商城小程序AI智能名片中的应用研究
人工智能·小程序·开源
2501_9160074716 小时前
Java界面开发工具有哪些?常用Java GUI开发工具推荐、实战经验与对比分享
android·java·开发语言·ios·小程序·uni-app·iphone
chensi_0717 小时前
uniapp x 鸿蒙开发之调试证书签名配置
服务器·uni-app·harmonyos
流***陌17 小时前
扭蛋机抽赏小程序:重构线上娱乐的“盲盒式”新体验
小程序·重构·娱乐
一 乐17 小时前
社区互助养老系统|基于java和小程序的社区互助养老系统小程序设计与实现(源码+数据库+文档)
java·数据库·spring boot·小程序·论文·毕设·社区互助养老系统小程序