关于elment选择不同复选框显示不同的内容区

Question

怎么监听选中的复选框的值 显示对应的内容区 假如选中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>

Answer 1

最简单的方法 参考下

<div class="b1" v-show="checkedCities.indexOf(1)> -1">内容区1</div>
<div class="b3" v-show="checkedCities.indexOf(2)> -1">内容区2</div>
<div class="b3" v-show="checkedCities.indexOf(3)> -1">内容区3</div>
<div class="b4" v-show="checkedCities.indexOf(4)> -1">内容区4</div>

Answer 2

checkbox-group绑定的是数组，就不能用==来判断了，用是否包含判断不就可以了，参考楼上

Answer 3

<el-checkbox v-for="city in cities" v-if="checkedCities.indexOf(city.id)> -1" :label="city.id" :key="city.id">{{city.cityName}}</el-checkbox>也可以在这里加v-if判断，不过楼上那种更好