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
},

}