Vue实现省市区三级联动，下拉框，简单易懂

效果图：代码：<!DOCTYPE html><html><head><meta charset="GBK"><title></title><style></style></head><body><div id="app" ><se

编程界明世隐

8371人浏览 · 2020-12-24 12:02:07

编程界明世隐 · 2020-12-24 12:02:07 发布

效果图：

代码：

<!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

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^