van-action-sheet 性别选择

效果图:

van-action-sheet 性别选择

<van-cell title="性别" is-link :value="personInfo.stuSex == 0 ? '男' : '女'"  @click="isEditGenderShow=true"></van-cell>

 

<van-action-sheet
  v-model="isEditGenderShow"
  :actions="actions"
  cancel-text="取消"
  close-on-click-action
  @cancel="isEditGenderShow = false"
  @select="onGenderSelect"
/>

  // 数据
data() { return {
personInfo: {stuSex: 0 }, actions: [ { name: '男', value: 0, disabled: false }, { name: '女', value: 1, disabled: false } ], isEditGenderShow: false } },

// 方法

methods: {
// 点击性别时的方法
onGenderSelect(data) {
  console.log(data)     // 可以打印出来看看 
  this.personInfo.stuSex = data.value  //  给性别赋值
  this.isEditGenderShow = false
},
}

 

 

上一篇:Python 之父宣布退出决策层,Python 该何去何从?


下一篇:不再管事的 Python 之父,最近在做些什么?