怎么监听选中的复选框的值 显示对应的内容区 假如选中1234 那么就显示1234的内容区
只选中1,那么就选中内容区1

<template>
<div>

  <el-checkbox-group v-model="checkedCities">
    <el-checkbox v-for="city in cities" :label="city.id" :key="city.id">{{city.cityName}}</el-checkbox>
  </el-checkbox-group>
  <div class="b1">内容区1</div>
  <div class="b3">内容区2</div>
  <div class="b3">内容区3</div>
  <div class="b4">内容区4</div>

</div>
</template>
<script>
const cityOptions = [

  {id: 1, cityName: '内容区1'}, 
  {id: 2, cityName: '内容区2'},
  {id: 3, cityName: '内容区3'},
  {id: 4, cityName: '内容区4'}
  ];

export default {

data() {
  return {
    checkedCities: [],
    cities: cityOptions
  };
},
watch:{
    checkedCities(valArr){
        console.log(valArr)
        // 怎么监听选中的复选框的值  显示对应的内容区  假如选中1234  那么就显示1234的内容区  
        // 只选中1,那么就选中内容区1
    }
}

};
</script>
<style>

.b1,.b2,.b3,.b4{
    display: none;
}

</style>