vue地址国省市三级联动显示/传值

最新推荐文章于 2023-08-30 11:25:07 发布

jmymy0

最新推荐文章于 2023-08-30 11:25:07 发布

阅读量2.3k

点赞数

本文链接：https://blog.csdn.net/jmymy0/article/details/81199811

版权

这篇博客展示了如何使用Vue.js实现地址选择的国省市三级联动效果。通过HTML、JavaScript和Vue的数据绑定及事件监听，动态加载并更新下拉选项，并处理已选值的接口请求。

摘要由CSDN通过智能技术生成

HTML

<li><span >地址</span>
<div>
<select name="sel" id="sel" v-model="address" @change="change">

//value
<option disabled value="">选择国家</option>
<option v-for="con in country" :value="con.name" ref="newText">{ { con.name }}</option>
</select>
<select v-model="address1" @change="change1" id="ssss" v-show="city">
<option disabled value="">选择省</option>
<option v-for="con1 in country1" :value="con1.name">{ { con1.name }}</option>
</select>
<select v-model="address2" @change="change2" v-show="county">
<option disabled value="">选择市</option>
<option v-for="con2 in country2" :value="con2.name">{ { con2.name }}</option>
</select>
</div>
</li>

DATA

address: '',
address1: '',
address2: '',

country: {},
country1: {},
country2: {},

city: false,
county: false,

iddd:0;

idddd:0;

mounted里

//已经选择好的数据接口，比如中国，北京，xx，判断的接口都在这里面
this.$http.get(已经选择好的数据接口，比如中国，北京，xx, {