vue三级联动下拉框特效代码下载


vue三级联动下拉框特效代码下载
vue三级联动下拉框特效代码下载以及三级联动、下拉框等js/jquery网页特效代码下载。

1. 引入JS

<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/items.js"></script>

2. HTML代码

	<div id="example">
		<select class="div1" v-model="prov">
			<option v-for="option in arr" :value="option.name">
				{{ option.name }}
			</option>
		</select>
		<select class="div1" v-model="city">
			<option v-for="option in cityArr" :value="option.name">
				{{ option.name }}
			</option>
		</select>
		<select class="div1" v-model="district" v-if="district">
			<option v-for="option in districtArr" :value="option.name">
				{{ option.name }}
			</option>
		</select>
	</div>
	<script>
		var vm = new Vue({
			el: '#example',
			data: {
				arr: arrAll,
				prov: '厨房',
				city: '电路',
				district: '灯具',
				cityArr: [],
				districtArr: []
			},
			methods: {
				updateCity: function () {
					for (var i in this.arr) {
						var obj = this.arr[i];
						if (obj.name == this.prov) {
							this.cityArr = obj.sub;
							break;
						}
					}
					this.city = this.cityArr[1].name;
				},
				updateDistrict: function () {
					for (var i in this.cityArr) {
						var obj = this.cityArr[i];
						if (obj.name == this.city) {
							this.districtArr = obj.sub;
							break;
						}
					}
					if(this.districtArr && this.districtArr.length > 0 && this.districtArr[1].name) {
						this.district = this.districtArr[1].name;
					} else {
						this.district = '';
					}
				}
			},
			beforeMount: function () {
				this.updateCity();
				this.updateDistrict();
			},
			watch: {
				prov: function () {
					this.updateCity();
					this.updateDistrict();
				},
				city: function () {
					this.updateDistrict();
				}
			}
		})
	</script>

相关推荐

发表评论

相关文章