兩種資料格式
註釋掉的是一種格式,未註釋的是另一種格式。
<template> <div> <!-- <select v-model="selectedProvince" @change="provinceChanged"> <option v-for="province in provinces" :value="province.code">{{ province.name }}</option> </select> --> <select v-model="selectedProvince" @change="provinceChanged"> <option v-for="province in provinces" :value="province">{{ province }}</option> </select> <select v-model="selectedCity"> <option v-for="city in cities" :value="city">{{ city }}</option> </select> </div> </template> <script> export default { data() { return { // provinces: [{code:'s001',name:'省份A'}, {code:'s002',name:'省份B'},{code:'s003',name:'省份C'}], // citiesMap: { // 's001': ['城市A1', '城市A2', '城市A3'], // 's002': ['城市B1', '城市B2', '城市B3'], // 's003': ['城市C1', '城市C2', '城市C3'] // }, provinces: ['省份A', '省份B', '省份C'], citiesMap: { '省份A': ['城市A1', '城市A2', '城市A3'], '省份B': ['城市B1', '城市B2', '城市B3'], '省份C': ['城市C1', '城市C2', '城市C3'] }, selectedProvince: '', selectedCity: '' }; }, computed: { cities() { return this.citiesMap[this.selectedProvince] || []; } }, methods: { provinceChanged() { this.selectedCity = this.cities[0] || ''; } }, mounted() { this.provinceChanged(); // 初始化城市列表 } }; </script>