Vue版本省、市、区三级联动
对于初次学习前端Javascript的小伙伴来说，三级联动是一个比较复杂的逻辑，有关原生JS是如何实现三级联动的呢，大家可以去看一下我之前写的一篇博客 js原生代码实现三级联动
那么我们使用Vue框架要如何实现三级联动呢？
关于用Vue来实现三级联动效果，这里其实并没有太大的区别，逻辑都是一样的，难点也仍是在取数据上，我们如何能准确的获取到相应的省、市、区才是问题的关键，具体的DOM元素渲染倒不是什么难题。
在写项目之前我们需要引进一下vue文件和数据文件，下面是我的vue文件
<!-- 大家要注意自己的文件所在路径 -->
<script src="./vue.js"></script>
这是我用到的数据，具体的数据文件我已经上传至我的资源库city_code.js，免费分享给大家
<script src="./city_code.js"></script>
简单的HTML结构
Vue和原生js写的HTML有很大的区别，Vue是由数据驱动的，他的元素是根据各种数据的条数来生生成具体的个数
v-for指令：我们可以用 v-for 指令基于一个数组来渲染一个列表。
- v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
- 如果我们需要两个参数就要写成( item, i) in items ，这时候的item依然是被迭代的数组元素的别名，而 i 则是item对应的索引
- 如果还是不理解的话，具体的语法大家可以去看下官网Vue官网文档解释
“Mustache”语法----{ {}}语法
- <标签>Message: { { 数据源里的数据 }}</标签>
- 可以实现类似效果的还有v-text和v-html指令
<body>
<!-- 一个vue根组件 -->
<div id="app">
<!-- 省份下拉框 -->
省:<select v-model="shengFen">
<template>
<option v-for="(sheng,index) in provinceArr">{
{sheng}}</option>
</template>
</select>
<!-- 城市下拉框 -->
市:<select v-model="shiQu">
<template>
<option v-for="(city,index) in cities2">{
{city}}</option>
</template>
</select>
<!-- 区/县下拉框 -->
区:<select v-model="area">
<template>
<option v-for="(area1,index) in areas2">{
{area1}}</option>
</template>
</select>
</div>
</body>
下面是Javascript代码，我这里主要是使用computed属性实现的，当然还可以使用watch属性来实现
<script>
//定义新的数组用来接收省份数据
var provinceArr = []
//遍历拿到省份数据
this.data.forEach(ele => {
var provinces = ele.name;
provinceArr.push(provinces)
});
new Vue({
//根组件
el: "#app",
//数据源
//默认值是河南省郑州市二七区
data: {
msg: "测试",
provinceArr,
shengFen: "河南省",
shiQu: "郑州市",
area: "二七区",
data
},
//方法
methods: {
},
//计算属性
computed: {
//城市
cities2() {
//定义新的数组用来接收city数据
var cityArr = [];
// console.log(this.data);
//第一层循环遍历到了省份
this.data.forEach(element => {
if (element.name == this.shengFen) {
//做这层判断是因为有些特别数据
if (element.city instanceof Array) {
//第二层循环遍历到了城市
element.city.forEach(ele => {
cityArr.push(ele.name);
})
}
}
});
//适当的加一些输出，有利于我们排查bug
console.log(cityArr);
//这里要注意我们要在循环外面return
return cityArr
},
//区县
areas2() {
//定义新的数组用来接收area数据
var areaArr = [];
//第一层循环遍历到了省份
this.data.forEach(element => {
//这个判断主要是为了拿到与所选择的省份对应的城市
if (element.name == this.shengFen) {
if (element.city instanceof Array) {
//第二层循环遍历到了城市
element.city.forEach(ele => {
//适当的加一些输出，有利于我们排查bug
console.log(ele.name);
if (ele.name == this.shiQu) {
if (ele.area instanceof Array) {
//第三层循环遍历到了区县
ele.area.forEach(item => {
areaArr.push(item.name)
})
}
}
})
}
}
});
console.log(areaArr);
//这里要注意我们要在循环外面return
return areaArr;
}
}
})
</script>