以前给别人完善过一个Vue的三级联动,今天想起来,给大家分享下,只供参考,请勿吐槽
<script src="https://unpkg.com/vue"></script>
<style>
* {
padding: 0px;
margin: 0px;
}
li {
list-style: none;
height: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
}
ul {
width: 300px;
height: 500px;
display: inline-block;
border: solid 1px #eee;
float: left;
margin-left: 20px;
}
.active {
background-color: #eee;
}
.newadd {
width: 100px;
border: none;
}
.newadd li {
border: solid 1px #eee;
margin-bottom: 15px;
}
</style>
</head>
<body>
<div class="myAddress">
<!--居住地址三级联动选项-->
<section class="showChose">
<section class="address">
<section class="title"> <span class="area" @click="provinceSelected()">{
{Province?Province:info[0].name}}</span> <span class="area" @click="citySelected()">{
{City?City:'请选择'}}</span> <span class="area" @click="districtSelected()"v-show="City">{
{District?District:'请选择'}}</span> </section>
<div>
<ul class="pro-ul">
<li class="addList" v-for="(v,k) in info" @click="getProvinceId(v.id, v.name, k)" :class="v.selected ? 'active' : ''">{
{v.name}}</li>
</ul>
<ul class="city-ul">
<li class="addList" v-for="(v,k) in showCityList" @click="getCityId(v.id, v.name, k)" v-show="showCity" :class="v.selected ? 'active' : ''">{
{v.name}}</li>
</ul>
<ul class="dist-ul">
<li class="addLi