淺談vant組件Picker 選擇器選單選問題
更新時間：2020年11月04日 09:24:31 作者：疾風(fēng)與你皆是過客
這篇文章主要介紹了淺談vant組件Picker 選擇器選單選問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
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 選擇器選單選問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
VUE 更好的 ajax 上傳處理 axios.js實現(xiàn)代碼
本篇文章主要介紹了VUE 更好的 ajax 上傳處理 axios.js實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
本篇文章主要介紹了Vue三層嵌套路由的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
vue + echarts實現(xiàn)中國省份地圖點擊聯(lián)動
這篇文章主要介紹了vue + echarts實現(xiàn)中國地圖省份點擊聯(lián)動,需要的朋友可以參考下2022-04-04
本文主要介紹了ElementUI對table的指定列進行合算，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
這篇文章主要介紹了ssm+vue前后端分離框架整合實現(xiàn)(附源碼)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了vue實現(xiàn)購物車拋物線小球動畫效果的方法,結(jié)合實例形式較為詳細的分析了vue.js實現(xiàn)拋物線動畫效果購物車功能相關(guān)原理與操作注意事項,需要的朋友可以參考下2019-02-02
vue3的ref、isRef、toRef、toRefs、toRaw詳細介紹
本文詳細講解了vue3的ref、isRef、toRef、toRefs、toRaw，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
vue3利用v-model實現(xiàn)父子組件之間數(shù)據(jù)同步的代碼詳解
在Vue 3中,v-model這一指令也得到了升級,使得父子組件之間的數(shù)據(jù)同步變得更加容易和靈活,本文將探討一下Vue 3中如何利用v-model來實現(xiàn)父子組件之間的數(shù)據(jù)同步,需要的朋友可以參考下2024-03-03
vue3+vite兼容低版本的白屏問題詳解(安卓7/ios11)
這篇文章主要給大家介紹了關(guān)于vue3+vite兼容低版本的白屏問題的相關(guān)資料,還給大家介紹了vue打包項目以后白屏和圖片加載不出來問題的解決方法,需要的朋友可以參考下2022-12-12
本文通過實例代碼給大家介紹了vue中的無限循環(huán)，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-09-09