1.寫遮罩

2.定義data

3.寫事件

4.效果圖

補充知識：vue使用vant編輯使用者性別

我就廢話不多說了，大家還是直接看程式碼吧~

<van-cell title="性別" is-link :value="user.gender===1?'男':'女'" @click="isEditGenderShow=true"></van-cell>
<!-- 編輯使用者性別 -->
  <van-action-sheet
   v-model="isEditGenderShow"
   :actions="actions"
   cancel-text="取消"
   close-on-click-action
   @cancel="onCancel"
   @select="onGenderSelect"
  />
<script>
export default {
 name: "EditUserINfo",components: {},props: {},data() {
  return {
   
   isEditGenderShow: false,// name會顯示出來，value是我們自己新增的
   actions: [{ name: "男",value: 1 },{ name: "女",value:0 }]
  };
 },watch: {},computed: {
  
 },methods: {
  onGenderSelect(data) {
   this.user.gender=data.value
   this.isEditGenderShow=false
  },},created() {},mounted() {}
};
</script>

以上這篇淺談vant元件Picker 選擇器選單選問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。