- 所在位置：
- 首頁 >
- 編程技術(shù) >
- JavaScript >
- vantUI中如何實現(xiàn)獲得piker選中值的ID
vantUI中如何實現(xiàn)獲得piker選中值的ID
Admin 2022-07-13 群英技術(shù)資訊 1022 次瀏覽
這篇文章主要介紹“vantUI中如何實現(xiàn)獲得piker選中值的ID”的相關(guān)知識，下面會通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“vantUI中如何實現(xiàn)獲得piker選中值的ID”文章能幫助大家解決問題。問題
官網(wǎng)中給的picker例子，每項只能是個字符串，但我需要它返回每個字符串對應(yīng)的自定義ID，而不是index。
官網(wǎng)例子
<van-picker :columns="columns" @change="onChange" />
export default {
data() {
return {
columns: ['杭州', '寧波', '溫州', '嘉興', '湖州']
};
},
methods: {
onChange(picker, value, index) {
console.log('當前值'+value+ '當前索引'+index);
}
}
};
解決
現(xiàn)在我的需求是獲得選中的值的id，而不是要這個index，所以只能用對象數(shù)組，看到官網(wǎng)上的禁用例子的數(shù)組中：{ text: '杭州', disabled: true },說明確實每行的數(shù)據(jù)是個對象的，而顯示的部分就是text的值。
那就照著這個來唄！
export default {
data() {
return {
//改一下
columns: [
{"keyId":2,"text":"測試1"},
{"keyId":10,"text":"測試2"},
{"keyId":31,"text":"測試3"}
],
};
},
methods: {
onChange(picker, value, index) {
//此時返回的value就是個對象了
var keyId = value.keyId;
var text= value.text;
console.log('當前值'+keyId + '當前索引'+text);
}
}
};
補充知識：vantUI時間選擇器將選中值改為 yyyy-mm-dd 00:00:00 格式
vantUI時間選擇器默認選中值為：
更改之后
代碼如下
<van-popup v-model="startTimeshow" position="bottom" :overlay="true">
<van-datetime-picker
@cancel="Cancel"
@confirm="Confirm"
@change="Change"
v-model="currentDate"
type="date"
/>
</van-popup>
data() {
return {
currentDate: new Date()
};
}，
methods:{
Change（）{
console.log(this.currentDate);
var date = this.currentDate;
var seperator1 = "-";
var seperator2 = ":";
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
this.currentdate =
date.getFullYear() +
seperator1 +
month +
seperator1 +
strDate +
" " +
"00" +
seperator2 +
"00" +
seperator2 +
"00";
}
}以上就是關(guān)于“vantUI中如何實現(xiàn)獲得piker選中值的ID”的介紹了，感謝各位的閱讀，希望這篇文章能幫助大家解決問題。如果想要了解更多知識，歡迎關(guān)注群英網(wǎng)絡(luò)，小編每天都會為大家更新不同的知識。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：[email protected]進行舉報，并提供相關(guān)證據(jù)，查實之后，將立刻刪除涉嫌侵權(quán)內(nèi)容。
猜你喜歡
-
JS中的函數(shù)和作用域的基礎(chǔ)知識有哪些
本篇文章給大家?guī)砹岁P(guān)于JavaScript中函數(shù)和作用域的相關(guān)知識，函數(shù)就是封裝了一段可被重復調(diào)用執(zhí)行的代碼塊，可用性的代碼范圍就是這個名字的作用域，希望對大家有幫助。
-
深入理解typescript中的infer關(guān)鍵字的使用
這篇文章給大家分享的是有關(guān)typescript中的infer關(guān)鍵字怎么用的內(nèi)容，下文有一些infer關(guān)鍵字的使用實例，對大家學習和理解infer關(guān)鍵字有一定的幫助，感興趣的朋友接下來一起跟隨小編看看吧。
-
怎樣jquery用寫一個年月日的時間選擇器？
這篇文章給大家分享的是有關(guān)jquery實現(xiàn)年月日的時間選擇器的代碼，小編覺得挺實用的，在很多常見都能使用到，因此分享給大家做個參考，感興趣的朋友接下來一起跟隨小編看看吧。
-
react的setstate是同步還是異步？
這篇文章主要給大家分享的是關(guān)于react的setstate的內(nèi)容，對于setstate是同步還是異步的問題，一些朋友可能不是理解，對此我們通過示例來了解一下，感興趣的朋友就繼續(xù)往下看吧。
-
JS中對象解構(gòu)怎樣用，能做什么
本篇文章給大家?guī)砹薐avaScript中對象解構(gòu)用法解析的相關(guān)知識，希望對大家有幫助。
推薦內(nèi)容
- CSS中flex布局如何實現(xiàn)自動換行？
- 在HTML中如何讓button居中，有幾種方法
- JS中怎樣刪除數(shù)組末尾元素？教你兩種方法
- vue怎樣獲取url參數(shù)?教你兩種方法
- 如何用Python計算BMI指數(shù)？一文帶你看懂
- python怎樣獲取數(shù)組元素的下標？教你三種方法
- python中的ord函數(shù)有什么用？用法是什么？
- Python中array與list轉(zhuǎn)換如何做，方法是什么
- 在CSS中怎么實現(xiàn)一條橫線，方法是什么
- Python怎樣設(shè)計串口之間通信的程序
- phpstorm怎么使用和操作？一文帶你快速了解
- vue怎么給對象數(shù)組賦值？this.$set方法幫你解決
相關(guān)標簽
- 基于PDO學生信息管理系統(tǒng)
- react-color取色器
- Flask數(shù)據(jù)交互
- laravel 路徑函數(shù)
- PHP實現(xiàn)站內(nèi)信
- monaco-editor
- render()函數(shù)的使用
- win10界面設(shè)置
- 求1~100中整數(shù)平方根
- PHP防止表單重復提交
- __str__()方法
- Linux后臺運行
- nvm安裝
- table行click事件
- PHP AOP
- SqlServer獲取服務(wù)器信息
- Python modf()函數(shù)
- CSS全局樣式
- Vue3局部刷新
- 打印數(shù)據(jù)類型
- JavaScript的打斷點
成為群英會員,開啟智能安全云計算之旅
立即注冊關(guān)注或聯(lián)系群英網(wǎng)絡(luò)
7x24小時售前：400-678-4567
7x24小時售后：0668-2555666
24小時QQ客服
群英微信公眾號
CNNIC域名投訴舉報處理平臺
服務(wù)電話：010-58813000
服務(wù)郵箱：[email protected]
投訴與建議：0668-2555555
Copyright ? QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版權(quán)所有
增值電信經(jīng)營許可證 : B1.B2-20140078 ICP核準（ICP備案）粵ICP備09006778號 域名注冊商資質(zhì) 粵 D3.1-20240008
