Vue实现省市区三级联动

2024-07-31 04:39:18

本文实例为大家分享了Vue实现省市区三级联动的具体代码，供大家参考，具体内容如下

效果图：

代码：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="GBK">
  <title></title>
  <style>
  </style>
 </head>
 <body>
  <div id="app" >
  <select v-model='prov' @change="changeCity();changeCity1()">
  <option v-for="(item,i) in items">{{item.name}}</option>
  </select>

  -- <select v-model='city' @change="changeCity1">
  <option v-for="(item,i) in cityArr">{{item.name}}</option>
  </select>

  -- <select v-model='city1'>
  <option v-for="(item,i) in cityArr1">{{item.name}}</option>
  </select> 

  <p>您选中的是：{{prov}}-{{city}}-{{city1}}</p>
 </div> 

 </body>
 <script src="vue.js"></script>
 <script>
 var id=1;
 new Vue({
 el:'#app',
 data:{
 prov:'北京',
 city:'',
 city1:'',
 items:[
  {name:'北京',
  sub:[
  {name:'北京市',sub:[{name:'北京市11'},{name:'北京市12'},{name:'北京市13'}]},
  {name:'北京市2',sub:[{name:'北京市21'},{name:'北京市22'},{name:'北京市23'}]},
  ]
 },
  {name:'江西',
  sub:[
  {name:'南昌市',sub:[{name:'高新区'},{name:'西湖区'},{name:'瑶湖区'}]},
  {name:'赣州市',sub:[{name:'赣州市1'},{name:'赣州市2'},{name:'赣州市3'}]},
  {name:'抚州市',sub:[{name:'抚州市1'},{name:'抚州市2'},{name:'抚州市3'}]}
  ]
  }
 ],
 cityArr:[],
 cityArr1:[]
 },
 mounted:function(){//执行默认选择
 this.changeCity();
 this.changeCity1();
 },
 methods:{
 changeCity:function(){//省切换
 var me=this;
 var item ;
 me.items.forEach(function(ele){
  if(ele.name===me.prov){//判断与prov是否相等，相等的表示被切换选中的省份
  item = ele;
  }
 })
 if(item){
  this.cityArr=item.sub;//将选中的item的sub设置给cityArr 用于显示市
  this.city=item.sub[0].name;//默认选择第一个市

  this.cityArr1=[];
  this.city1='';
 }

 },
 changeCity1:function(){//市切换
 var me=this;
 var item ;
 me.cityArr.forEach(function(ele){
  if(ele.name===me.city){//判断与city是否相等，相等的表示被切换选中的市
  item = ele;
  }
 })
 if(item){
  this.cityArr1=item.sub;//将选中的item的sub设置给cityArr1 用于显示区
  this.city1=item.sub[0].name;//默认选择第一个区
 }
 }
 }
 })
 </script> 

</html>

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

vue + elementUI实现省市县三级联动的方法示例

本文介绍了vue + elementUI实现省市县三级联动的方法示例,分享给大家,具体如下: 1.首先需要准备省市县json文件,网上有很多可以下载.项目中使用的city.json数据是这样的格式: [ { "value": "110000", "label": "北京市", "children": [ { "value": "110000", "label
vue移动端城市三级联动组件使用详解

本文实例为大家分享了vue移动端城市三级联动组件的具体代码,供大家参考,具体内容如下先看效果图以下组件代码 <template> <div class="address"> <div class="addressboxbg" @click="cancel"></div> <div class="addressbox"> <p class="text
Vue2仿淘宝实现省市区三级联动

三级联动,随着越来越多的审美,出现了很多种,好多公司都仿着淘宝的三级联动 ,好看时尚,so我们公司也一样--为了贴代码方便,我把写在data里面省市区的json独立了出来,下载贴进去即可用,链接如下:vue.json(这个直接是个data,放入你的vue2项目中即可.(因为我的项目是用的vue2,所以,其他的属性跟博客内容是吻合的.请配合博客再下载此json)). 首先页面显示如下: 然后我们县级所在地区会出现三级联动,如下:(以下是片段,背景色未截取) 这个张什么样,以什么形式出现,取决于贵公
详解Vue、element-ui、axios实现省市区三级联动

现在大部分电商的网站.app都需要用户或者管理者去选择设置地区等位置信息.下面我就介绍一下前端开发者用vue,axios,element-ui开发一个省市区三级联动的组件. 1.准备工作,首先我们需要全中国的省市区资源的json数据(科普一下:前六位数字是身份证前六位) 2.搭建vue-cli,安装axios,element-ui,创建vue,webpack项目 1). 在控制台或者终端执行以下代码,其中只需要路由(y),其他e2e,eslint这些不需要(y) vue init webpack
vue.js模仿京东省市区三级联动的选择组件实例代码

前言在最近的工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件,google查了下都是下拉框形式的,于是自己写了一个,希望对使用vue开发项目的朋友有帮助,下面话不多说了,来一起看看详细的介绍吧. 显示效果如下: 注意:使用vue2.0开发实例代码 html代码如下  <section class="showChose" v-show="showChose"> <section cl
基于Vue2实现简易的省市区县三级联动组件效果

这是一个基于Vue2的简易省市区县三级联动组件,可以控制只显示省级或只显示省市两级,可设置默认值等.提供原始省市县代码和名称数据,适用于各种有关城市区县的应用. 安装我们使用npm安装: npm install v-distpicker --save 使用首先在模板中加入组件: <v-distpicker></v-distpicker> 如果要带默认值,则可以这样: <v-distpicker province="广东省" city="广州市
Vue使用vue-area-linkage实现地址三级联动效果的示例

很多时候我们需要使用地址三级联动,即省市区三级联动.网上有很多插件,在此介绍Vue的一款地区联动插件:vue-area-linkage,下面介绍如何使用这个插件实现地址联动效果: 1.安装vue-area-linkage插件:npm install --save vue-area-linkage --registry=https://registry.npm.taobao.org --verbose 2.在main.js上进行依赖注入,如下图所示: 3.在对应vue文件的template模板上写
使用vue2实现带地区编号和名称的省市县三级联动效果

我们知道省市区县都有名称和对应的数字唯一编号,使用编号可以更方便查询以及程序处理,我们今天来了解一下使用vue2来实现常见的省市区下拉联动选择效果. 准备数据源我们的省市区县的数据源来自本站文章 <基于Vue2的简易的省市区县三级联动组件> 中的districts.js,感谢 v-distpicker作者.districts.js中的数据格式大概是这样的: export default { 100000: { 110000: '北京市', 120000: '天津市', 130000: '河北
vue基于mint-ui实现城市选择三级联动

项目是基于vue2 的移动端项目,供大家参考,具体内容如下 1.实际效果地址三级联动 mint-ui picker.png 2.首先你需要去下载一个包含中国省份,城市,区县的数据如下: (这个地址里面包含二级联动数据,三级联动数据,四级联动数据等,找到自己需要的) (一个更好的中国地区数据,推荐用这个) 3.具体代码主要是用到了mint-ui的picker组件,关于mint-ui的使用就自行看官网 Ⅰ .html组件 <div> <mt-picker :slots="my
Vue实现省市区三级联动

本文实例为大家分享了Vue实现省市区三级联动的具体代码,供大家参考,具体内容如下效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="GBK"> <title></title> <style> </style> </head> <body> <div id="app" > <
Vue自定义省市区三级联动

本文实例为大家分享了Vue自定义省市区三级联动的具体代码,供大家参考,具体内容如下 1.如图(省市区加上全部联动) 第一步:找到了一个普通的省市区先进行遍历更改 2.把更改后的json文件放入vue项目中引入到你想要的页面 3.剩余代码如下 <template> <div class="percentloop">  <section class="section">
原生js实现省市区三级联动代码分享

前言插件功能只满足我司业务需求,如果希望有更多功能的,可在下方留言,我尽量扩展!如果你有需要或者喜欢的话,可以给我github来个star 准备 <div id="wrap"></div> 页面中的容器标签不限制,只需给个id就行 var address = new Address({ wrapId: 'wrap', showArr: ['provinces','citys','areas'], beforeCreat:function(){ console.
使用mint-ui实现省市区三级联动效果的示例代码

引用插件:饿了么的mint-ui组件中的picker功能,具体API可参照官网说明:http://mint-ui.github.io/docs/#/zh-cn2/picker 背景:项目需要做一个省份-城市-地区的选择级联效果,我从gayhub上找了一下,决定使用mint-ui的组件,因为各个功能都很全而且设计跟我们的项目风格类似. 具体实现: 通过阅读官网的实例,大概就能知道这个组件的用法: 在vue中写入组件:<mt-picker :slots="slots" @change
PHP+Mysql+Ajax+JS实现省市区三级联动

基本思想就是:在JS动态创建select控件的option,通过Ajax获取在PHP从SQL数据库获取的省市区信息,代码有点长,但很多都是类似的,例如JS中省.市.区获取方法类似,PHP中通过参数不同执行不同的select语句. index.html代码: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xh
javascript实现省市区三级联动下拉框菜单

本文实例讲述了javascript实现省市区三级联动下拉框菜单代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title>  <!-- <script type="text/javascript" src="http:/
jquery+ajax实现省市区三级联动效果简单示例

本文实例讲述了jquery+ajax实现省市区三级联动效果.分享给大家供大家参考,具体如下: 一直想学习下Ajax,没时间,汗,这借口太牵强了.下了点教程在手机里,翻了好几遍了,没实战一次. 最近的项目里需要Ajax实现效果,就下了个jquery,然后找了个实例,学习了一下,幡然醒悟,NND,jquery果然强大的一塌糊涂,实现Ajax简直就是不费吹灰之力.下面把学习过程跟大家分享下,虽然还没有搞清楚jquery ajax的底层相关.不管了.我们不需要去发明轮子.呵呵. 先上代码,是一个省市区三
从QQ网站中提取的纯JS省市区三级联动菜单

我发现在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动.所以研究了一下.他的界面如下: 何不直接使用的数据呢? 惊喜的是QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com/js/geo.js 使用方法如下: 复制代码代码如下: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 直接使用QQ的省市区数据

Vue实现省市区三级联动

相关推荐

随机推荐