同一组件中 两个单选radio控制一个div显示与隐藏 代码实现

实现功能如下，点击否显示div，点击是隐藏div

代码如下：

<template>
  <!-- 实现点击是隐藏div 点击否显示div效果  -->
  <div>
    <!-- 给两个单选按钮加上change改变事件 -->
    <el-radio v-model="radio" label="1" @change="changeColor">是</el-radio>
    <el-radio v-model="radio" label="2" @change="changeColor">否</el-radio>
    <!-- 对下面的盒子加一个v-if 给一个值 并且在data中定义一下初始状态 -->
    <div class="box" v-if="radios">

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radios : false,
      radio: "1",
    };
  },
  methods:{
    //当触发change事件的时候 先随便传一个参数 这个参数是选中的 Radio label 值
    changeColor(param){
      console.log(param)
      //判断label值为2，也就是否时候隐藏
      if(param === '2'){
        this.radios = true
      } else {
        this.radios = false
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.box{
  width: 200px;
  height: 200px;
  background: #f56;
}
</style>