【Vue】使用v-show实现内容展示隐藏与通过手动添加display实现内容展示与隐藏

需求：若checkBox选项没有被勾选，则隐藏input输入框，若checkBox至少有1项被勾选，则显示input输入框。

效果如下：

没有勾选项时隐藏输入框：

有勾选项显示输入框：

html代码如下：

        <el-form
          ref="formInfo"          label-width="100px"          :model="formInfo"         >
          <el-form-item label="多选框">
            <el-checkbox-group
              v-model="checkBoxValue"
              @change="handleCheckedChange"
            >
              <el-checkbox
                v-for="(checkItem,checkKey) in unchecked "
                :key="checkKey"
                :label="checkItem"
                style="margin-right:10px"
              >
                {{ checkItem }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item v-show="inputShow" label="输入框" :style="hiddenStyle">
            <el-input v-model="formInfo.value111" />
          </el-form-item>
        </el-form>

data中的参数：

data() {
    return {
      hiddenStyle: 'display:none',
      formInfo: {
        value111: '',
        checkBoxValue: []
      },
      unchecked: ['选项1', '选项2', '选项3'],
      inputShow: false,
    }
  },

method中的方法：

methods: {
    // 多选框触发
    handleCheckedChange(value) {
      console.log(value)
      if (value.length > 0) {
        // this.hiddenStyle = 'display:block'
        this.inputShow = true
      } else {
        // this.hiddenStyle = 'display:none'
        this.inputShow = false
      }
    },
}