vue联动清空下拉选

在Vue中，经常会遇到需要联动清空下拉选的需求。以下是一种实现方法：

// HTML 代码div>
    label>
    省份:/label>
    select v-model="selectedProvince" @change="clearCity">
    option value="" selected>
    请选择/option>
    option v-for="(province, index) in provinces" :value="index">
{
{
 province }
}
    /option>
    /select>
    label>
    城市:/label>
    select v-model="selectedCity">
    option value="" selected>
    请选择/option>
    option v-for="(city, index) in cities" :value="index">
{
{
 city }
}
    /option>
    /select>
    /div>
// JS 代码data() {
return {
provinces: ['浙江省', '江苏省', '安徽省'],cities: [['杭州市', '宁波市', '温州市'],['南京市', '苏州市', '无锡市'],['合肥市', '芜湖市', '马鞍山市']],selectedProvince: '',selectedCity: ''}
}
,methods: {
clearCity() {
this.selectedCity = ''  // 如果省份变化，则城市自动清空}
}
    

以上代码中，首先定义了两个下拉选，分别用v-model指定了对应的变量selectedProvince和selectedCity。其中，省份选项对应的数组provinces和城市选项对应的二维数组cities都是提前定义好的数据。

在省份选项上添加了@change事件，当省份发生改变时，会触发清空城市选项的方法clearCity。

方法中只需要将selectedCity的值重置为空即可。由于selectedCity与城市选项之间有v-model的绑定，因此selectedCity的值会自动更新到页面上。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！