网络编程 
首页 > 网络编程 > 浏览文章

vue学习之mintui picker选择器实现省市二级联动示例

(编辑:jimmy 日期: 2024/11/20 浏览:3 次 )

本文介绍了vue学习之mintui picker选择器实现省市二级联动示例,分享给大家,具体如下:

Mint UI 使用文档:https://mint-ui.github.io/docs/#/zh-cn2

Popup弹出框介绍:https://mint-ui.github.io/docs/#/zh-cn2/popup

Picker选择器介绍:https://mint-ui.github.io/docs/#/zh-cn2/picker

Datetime picker日期选择器介绍:https://mint-ui.github.io/docs/#/zh-cn2/datetime-picker

代码如下:

<!-- 页面模版 --> 
<template> 
 <div> 
  <!--header--> 
  <com-header :title="headerData.title" :toLink="headerData.toLink"></com-header> 
  <!--header end--> 
  <!--container--> 
  <div class="ybb-yuyue"> 
   <div class="yy-item-box mine-me"> 
    <a class="mint-cell mint-field"> 
     <div class="mint-cell-left"></div> 
     <div class="mint-cell-wrapper"> 
      <div class="mint-cell-title"> 
       <span class="mint-cell-text">头像</span> 
      </div> 
      <div class="mint-cell-value"> 
       <div class="mint-cell-value"></div> 
       <img v-bind:src="/UploadFiles/2021-04-02/data.photo">
{ 
  "code": 200, 
  "msg": "获取区域信息成功!", 
  "t": { 
    "areaList": [ 
      { 
        "上海": [ 
          "上海" 
        ], 
        "北京": [ 
          "北京" 
        ], 
        "广东": [ 
          "广州", 
          "深圳" 
        ], 
        "江苏": [ 
          "徐州", 
          "南京" 
        ], 
        "福建": [ 
          "福州" 
        ] 
      } 
    ], 
    "provinceCodeList": [ 
      { 
        "上海": [ 
          "120001" 
        ], 
        "北京": [ 
          "110001" 
        ], 
        "广东": [ 
          "130001" 
        ], 
        "江苏": [ 
          "130007" 
        ], 
        "福建": [ 
          "0100" 
        ] 
      } 
    ], 
    "cityCodeList": [ 
      { 
        "上海": [ 
          "120002" 
        ], 
        "北京": [ 
          "110002" 
        ], 
        "广州": [ 
          "130002" 
        ], 
        "南京": [ 
          "130006" 
        ], 
        "深圳": [ 
          "518000" 
        ], 
        "福州": [ 
          "0200" 
        ], 
        "徐州": [ 
          "130009" 
        ] 
      } 
    ] 
  } 
} 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

上一篇:使用原生js封装的ajax实例(兼容jsonp)
下一篇:jQuery中 DOM节点操作方法大全