vue使用v-for渲染dom结构后获取单个dom元素改变其样式

    <!-- html部分 -->
    <div>
        <div class="city-item">区域</div>
        <template v-for="item in quyu">
          <div ref="areaRef"
            :key="item.id"
            @click.stop="area(item, $event)"
          >{{item.value}}</div>
        </template>
    </div>
    <div>
        <div class="city-item">距离</div>
        <template v-for="item in urbanScope">
          <div ref="distanceRef"
            :key="item.id"
            @click.stop="distance(item, $event)"
          >{{item.label}}</div>
        </template>
    </div>

      <!-- javaScript部分 -->
     <script>
         data () {
             return {
                urbanScope: [
                    // 城市范围
                    { id: 0, label: '500m', value: 500 },
                    { id: 1, label: '1km', value: 1000 },
                    { id: 2, label: '5km', value: 5000 },
                    { id: 3, label: '10km', value: 10000 },
                    { id: 4, label: '20km', value: 20000 }
                ],
                quyu: [
                    { id: 0, value: '武进区' },
                    { id: 0, value: '天宁区' },
                    { id: 0, value: '新北区' },
                    { id: 0, value: '钟楼区' },
                    { id: 0, value: '金坛区' }
                ],
             }
         },
         methods: {
            area (data, e) { // 获取选择区域
                for (var c = 0; c < this.$refs.areaRef.length; c++) {
                    this.$refs.areaRef[c].style.color = '#000'
                }
                e.target.style.color = '#fab700'
                this.cityList.quyu = data.value
            },
            distance (data, e) { // 获取选择距离
                for (var c = 0; c < this.$refs.distanceRef.length; c++) {
                    this.$refs.distanceRef[c].style.color = '#000'
                }
                e.target.style.color = '#fab700'
                this.cityList.distance = data.value
            },
         }
     </script>