Ionic5 Vue3中表单相关组件 以及 表单组件的双休数据绑定

Ionic5 Vue3 实战视频教程：https://www.itying.com/goods-1150.html

一、Ionic5 Vue3中的ion-input单行文本框

<ion-list>
        <ion-item lines="full">
          <ion-label position="floating">用户名</ion-label>
          <ion-input type="text" v-model="userinfo.username"></ion-input>
        </ion-item>
        <ion-item lines="full">
          <ion-label position="floating">年龄</ion-label>
          <ion-input type="text" v-model="userinfo.age"></ion-input>
        </ion-item>
</ion-list>

注意：必须主动引入以及注册对应组件 二、Ionic5 Vue3中的ion-toggle开关

 <ion-item>
          <ion-label>是否本科</ion-label>
          <ion-toggle slot="end" v-model="userinfo.flag"></ion-toggle>
 </ion-item>

**三、Ionic5 Vue3中的ion-radio-group、ion-radio 单选按钮组 **

<ion-list>
        <ion-radio-group name="auto" v-model="userinfo.payType">
          <ion-list-header>
            <ion-label>选择支付方式</ion-label>
          </ion-list-header>
          <ion-item>
            <ion-avatar slot="start">
              <img src="/assets/images/alipay.png" />
            </ion-avatar>
            <ion-label>支付宝支付</ion-label>
            <ion-radio value="1"></ion-radio>
          </ion-item>
          <ion-item>
            <ion-avatar slot="start">
              <img src="/assets/images/weixinpay.png" />
            </ion-avatar>
            <ion-label>微信支付</ion-label>
            <ion-radio value="2"></ion-radio>
          </ion-item>
        </ion-radio-group>
</ion-list>

四、Ionic5 Vue3中的ion-checkbox 多选按钮组

<ion-list>
        <ion-item-divider>
          <ion-label>爱好</ion-label>
        </ion-item-divider>
        <ion-item v-for="(item,index) in userinfo.hobbyList" :key="index">
          <ion-label>{{item.title}}</ion-label>
          <ion-checkbox slot="start" v-model="item.isChecked"></ion-checkbox>
        </ion-item>
</ion-list>

**五、Ionic5 Vue3中的ion-select 选择框 ** 弹出框方式:

<ion-list>
        <ion-item>
          <ion-label>选择城市</ion-label>
          <ion-select
            v-model="userinfo.city"
            placeholder="选择城市"
            cancel-text="取消"
            ok-text="确定"
          >
            <ion-select-option
              v-for="(item, index) in userinfo.cityList"
              :key="index"
              :value="item"
              >{{ item }}
              </ion-select-option>           
          </ion-select>
        </ion-item>
</ion-list>

Actionsheet方式:

<ion-list>
        <ion-item>
          <ion-label>选择城市-Action</ion-label>
          <ion-select
            :interface-options="customActionSheetOptions"
            interface="action-sheet"
            placeholder="选择城市"
            v-model="userinfo.city"
          >
            <ion-select-option
              v-for="(item, index) in userinfo.cityList"
              :key="index"
              :value="item"
              >{{ item }}
              </ion-select-option>
          </ion-select>
        </ion-item>
</ion-list>

setup() {
    const customActionSheetOptions: any = {
      header: '选择城市',
      subHeader: '选择一个你喜欢的城市'
    };
    return {      
      customActionSheetOptions
    };
  }

六、Ionic5 Vue3中的ion-textarea 多行文本框

 <ion-list>
        <ion-item>
          <ion-textarea color="dark" v-model="userinfo.info" placeholder="备注信息"></ion-textarea>
        </ion-item>
</ion-list>