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

vue聯動picker

林國瑞1年前6瀏覽0評論

Vue聯動picker可以實現對于聯動選擇器的控制,讓我們可以輕松地進行數據交互和選擇。在Vue中,我們可以通過v-model指令來控制value的值,而在picker中,我們可以使用value屬性來控制當前選中的值。下面我們來看一下如何實現Vue聯動picker。

<template>
<div class="picker-wrapper">
<picker :value="value1" @change="handleChange1">
<picker-item v-for="(item, index) in list1" :key="index" :value="item">
{{ item }}
</picker-item>
</picker>
<picker :value="value2" @change="handleChange2">
<picker-item v-for="(item, index) in list2[value1]" :key="index" :value="item">
{{ item }}
</picker-item>
</picker>
</div>
</template>
<script>
export default {
data() {
return {
value1: 0,
value2: 0,
list1: ['湖北省', '四川省', '廣東省'],
list2: [
['武漢市', '宜昌市', '襄陽市', '荊州市'],
['成都市', '綿陽市', '眉山市', '樂山市'],
['廣州市', '深圳市', '珠海市', '佛山市']
]
}
},
methods: {
handleChange1(val) {
this.value1 = val;
this.value2 = 0;
},
handleChange2(val) {
this.value2 = val;
}
}
}
</script>

在上面的代碼中,我們通過template標簽實現了兩個picker組件的渲染,在data中定義了兩個變量value1和value2來控制選中的值,list1和list2分別存儲了省份和城市的數據。在methods中我們定義了handleChange1和handleChange2來分別監聽picker1和picker2的選中值的變化。

需要注意的是,在picker2的picker-item中我們使用了v-for遍歷list2[value1]來實現對應省份城市的選擇,這里的list2[value1]即為根據value1來動態計算出來的數據。

經過這樣的設置,我們就可以實現Vue聯動picker的效果了。當picker1改變時,我們會將value1和value2的值分別設為0,這實現了從同一個省份的城市選擇之后再選擇其他省份的功能。