本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持站长技术。
Afrikaans:af Albanian:sq Basque:eu Belarusian:be Bulgarian:bg Catalan:ca Ch...
一. RabbitMQ 简介 MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用...
Linux 发行版的爱好者们又有全新的 Linux 可以体验了,日前一款名为 TeLOS 的 Li...
ajax传送json格式数据,关键是指定contentType,data要是json格式 如果是restful...
今天给大家分享四个在实际开发中,比较实用的SQL Server脚本函数,希望对大家能...
Eval 计算一个表达式的值并返回结果。 语法:[result = ]eval_r(expression_r) e...
如果你想对使用手机,平板电脑和辅助技术的用户隐藏某些内容,而只对键盘用户显...
本文分享自华为云社区《 架构可视化支撑系统演进探索 》原文作者无名小溪。 随着...
一、导读 本文主要介绍Redhat7.6系统安装oracle 12201版本RAC的一些坑以及避坑方...
最近在和团队规划OKR目标的时候,我们讨论了很多问题,我先抛砖引玉,列举了一些...