Vue三级联动之保存已选地址

最新推荐文章于 2024-05-20 18:02:16 发布

程序员会武功

最新推荐文章于 2024-05-20 18:02:16 发布

阅读量1.3k

点赞数

分类专栏： vue 文章标签： Vue 三级联动可保存已选地址

本文链接：https://blog.csdn.net/qq_27099139/article/details/79990002

版权

以前给别人完善过一个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>
        &

最低0.47元/天解锁文章

程序员会武功

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue三级联动之保存已选地址

以前给别人完善过一个Vue的三级联动，今天想起来，给大家分享下，只供参考，请勿吐槽&lt;script src="https://unpkg.com/vue"&gt;&lt;/script&gt;&lt;style&gt;* { padding: 0px; margin: 0px;}li { list-style: none; height: 30px; line-height:...
复制链接

扫一扫