最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

vantUI 獲得piker選中值的自定義ID操作

 更新時(shí)間:2020年11月04日 09:44:22   作者:HYeeee  
這篇文章主要介紹了vantUI 獲得piker選中值的自定義ID操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

問(wèn)題

官網(wǎng)中給的picker例子,每項(xiàng)只能是個(gè)字符串,但我需要它返回每個(gè)字符串對(duì)應(yīng)的自定義ID,而不是index。

vantUI官網(wǎng):picker

官網(wǎng)例子

<van-picker :columns="columns" @change="onChange" />

export default {
 data() {
  return {
   columns: ['杭州', '寧波', '溫州', '嘉興', '湖州']
  };
 },
 methods: {
  onChange(picker, value, index) {
   console.log('當(dāng)前值'+value+ '當(dāng)前索引'+index);
  }
 }
};

解決

現(xiàn)在我的需求是獲得選中的值的id,而不是要這個(gè)index,所以只能用對(duì)象數(shù)組,看到官網(wǎng)上的禁用例子的數(shù)組中:{ text: '杭州', disabled: true },說(shuō)明確實(shí)每行的數(shù)據(jù)是個(gè)對(duì)象的,而顯示的部分就是text的值。

那就照著這個(gè)來(lái)唄!

export default {
 data() {
  return {
  //改一下
   columns: [
    {"keyId":2,"text":"測(cè)試1"},
    {"keyId":10,"text":"測(cè)試2"},
    {"keyId":31,"text":"測(cè)試3"}
   ],
   
  };
 },
 methods: {
  onChange(picker, value, index) {
   //此時(shí)返回的value就是個(gè)對(duì)象了
   var keyId = value.keyId;
   var text= value.text;
   console.log('當(dāng)前值'+keyId + '當(dāng)前索引'+text);
  }
 }
};

補(bǔ)充知識(shí):vantUI時(shí)間選擇器將選中值改為 yyyy-mm-dd 00:00:00 格式

vantUI時(shí)間選擇器默認(rèn)選中值為:

更改之后

代碼如下

<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";
} 
}

以上這篇vantUI 獲得piker選中值的自定義ID操作就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue 右鍵菜單插件 簡(jiǎn)單、可擴(kuò)展、樣式自定義的右鍵菜單

    vue 右鍵菜單插件 簡(jiǎn)單、可擴(kuò)展、樣式自定義的右鍵菜單

    這篇文章主要介紹了vue 右鍵菜單插件 簡(jiǎn)單、可擴(kuò)展、樣式自定義的右鍵菜單,本文給大家分享個(gè)例子,給大家及時(shí)的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
    2018-11-11
  • axios實(shí)現(xiàn)文件上傳并獲取進(jìn)度

    axios實(shí)現(xiàn)文件上傳并獲取進(jìn)度

    這篇文章主要為大家詳細(xì)介紹了axios實(shí)現(xiàn)文件上傳并獲取進(jìn)度,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-09-09
  • Console高級(jí)用法總結(jié)

    Console高級(jí)用法總結(jié)

    Console 對(duì)象提供了瀏覽器控制臺(tái)調(diào)試的接口。在不同宿主環(huán)境上它的工作方式可能不一樣,但通常都會(huì)提供一套共性的功能,本文主要總結(jié)了Console的一些高級(jí)用法,感興趣的小伙伴可以參考一下
    2023-04-04
  • vue組件通信傳值操作示例

    vue組件通信傳值操作示例

    這篇文章主要介紹了vue組件通信傳值操作,結(jié)合實(shí)例形式分析了vue.js父子組件通信及兄弟組件通信相關(guān)操作技巧,需要的朋友可以參考下
    2019-01-01
  • vue實(shí)現(xiàn)進(jìn)入全屏和退出全屏的示例代碼

    vue實(shí)現(xiàn)進(jìn)入全屏和退出全屏的示例代碼

    最近一個(gè)項(xiàng)目需要進(jìn)行大屏展示,所以登錄完就要處于一個(gè)全屏的狀態(tài),本文主要介紹了vue實(shí)現(xiàn)進(jìn)入全屏和退出全屏的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下
    2023-12-12
  • 詳解vuex中mutations方法的使用與實(shí)現(xiàn)

    詳解vuex中mutations方法的使用與實(shí)現(xiàn)

    這篇文章主要為大家詳細(xì)介紹了vuex中mutations方法的使用與實(shí)現(xiàn)的相關(guān)知識(shí),文中的示例代碼簡(jiǎn)潔易懂,具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以跟隨小編一起了解一下
    2023-11-11
  • Vue2.0 實(shí)現(xiàn)單選互斥的方法

    Vue2.0 實(shí)現(xiàn)單選互斥的方法

    本篇文章主要介紹了Vue2.0 實(shí)現(xiàn)單選互斥的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-04-04
  • 在Vue中解決跨域問(wèn)題的常用方式

    在Vue中解決跨域問(wèn)題的常用方式

    跨域問(wèn)題是由瀏覽器引起的安全限制,而不是Vue框架本身導(dǎo)致的,Vue本身并不限制跨域訪問(wèn),它只是一個(gè)前端框架,負(fù)責(zé)構(gòu)建用戶界面和處理數(shù)據(jù)邏輯,本文給大家介紹了在Vue中解決跨域問(wèn)題的常用方式,需要的朋友可以參考下
    2023-10-10
  • Vue封裝的可編輯表格插件方法

    Vue封裝的可編輯表格插件方法

    今天小編就為大家分享一篇Vue封裝的可編輯表格插件方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-08-08
  • 關(guān)于element-ui中@selection-change執(zhí)行兩次的問(wèn)題

    關(guān)于element-ui中@selection-change執(zhí)行兩次的問(wèn)題

    這篇文章主要介紹了關(guān)于element-ui中@selection-change執(zhí)行兩次的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08

最新評(píng)論

唐海县| 高淳县| 台中市| 灵璧县| 临沧市| 富平县| 营口市| 牙克石市| 东台市| 澄迈县| 改则县| 灵武市| 垫江县| 徐水县| 山阳县| 自贡市| 翁牛特旗| 华阴市| 四平市| 遂川县| 旬邑县| 阳泉市| 平和县| 兰州市| 阳原县| 繁昌县| 茌平县| 屏边| 绥棱县| 新津县| 临泽县| 嵊泗县| 钟祥市| 广州市| 张家界市| 嘉义县| 吐鲁番市| 南宫市| 万全县| 台南市| 城步|