色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

vue聯動清空下拉選

楊一鳴1年前6瀏覽0評論

在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的值會自動更新到頁面上。