点击elment多个复选框怎么显示多个复选框对应的内容区

Question

我想点击复选框里面的值的时候显示不同的内容区 假如我多选的时候显示多选的内容区
假如我选中全屏和底部横条的复选框，那么我就显示内容区3和4 要是全部都选中就都显示全部的内容区

<el-form-item label="请选择本活动需要的广告位 " prop="activtyad" class="activtyad" >
                <el-checkbox-group v-model="ruleForm.activtyad" >
                    <el-checkbox label="全屏"></el-checkbox>
                    <el-checkbox label="底部横条"></el-checkbox>
                    <el-checkbox label="商品位"></el-checkbox>
                    <el-checkbox label="制作等待页"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>
        <div class="ab-containers">
            <div class="btn1" >这是广告内容区1</div>
            <div  class="btn2">这是广告内容区2</div>
            <div class="btn3">这是广告内容区3</div>
            <div class="btn4" >这是广告内容区4</div>
        </div>

Answer 1

<div class="btn1" v-if="ruleForm.activtyad.indexOf('全屏')>-1">这是广告内容区1</div>
<div  class="btn2" v-if="ruleForm.activtyad.indexOf('底部横条')>-1">这是广告内容区2</div>
<div class="btn3" v-if="ruleForm.activtyad.indexOf('商品位')>-1">这是广告内容区3</div>
<div class="btn4" v-if="ruleForm.activtyad.indexOf('制作等待页')>-1" >这是广告内容区4</div>