微信小程序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
        }
    }
}
相关推荐
跨时代科技6 小时前
洗车小程序系统前端uniapp 后台thinkphp
小程序
依辰6 小时前
小程序SAAS产品定制化需求解决方案
前端·javascript·微信小程序
anyup6 小时前
uni-app 蓝牙打印:实现数据分片传输机制
前端·uni-app·trae
fakaifa8 小时前
【最新版】沃德代驾源码全开源+前端uniapp
前端·小程序·uni-app·开源·php·沃德代驾·代驾小程序
18538162800余。12 小时前
NFC 碰一碰实现视频源码,网页与小程序协同
小程序
Monly2113 小时前
Uniapp:navigator(页面跳转)
uni-app
换日线°1 天前
微信小程序拖拽排序有效果图
微信小程序
码起来呗1 天前
基于微信小程序的走失儿童帮助系统-项目分享
微信小程序·小程序
大樊子1 天前
微信小程序路由跳转实现详解
微信小程序·小程序
Monly211 天前
Uniapp:swiper(滑块视图容器)
uni-app