将纯HTML/JS代码迁移至Vue2时筛选功能实现异常求助

你写的Vue2代码存在几个核心问题，导致效果不符合预期：

• 未在组件data中定义响应式的显隐状态，也未设置初始值
• 关闭图标绑定的点击事件错误绑定为展开方法showfilter，没有对应关闭逻辑
• Vue模板内绑定状态不需要加this.前缀，模板会自动读取实例上的属性
• 未实现状态切换的核心逻辑，点击按钮时没有正确修改显隐状态
• 请提前确认你用到的三个CSS类已在样式文件中定义：
  • .display-none { display: none; }
  • .display-inline { display: inline; }
  • .display-block { display: block; }

模板部分 #

<template>
  <div class="job-filter">
    <h3>
      Filter
      <img
        id="icon-filter"
        @click="isFilterShow = true"
        :class="{ 'display-none': isFilterShow }"
        src="../assets/recruit/angle-down-svgrepo-com.svg"
        alt="展开筛选"
      >
      <img
        id="icon-close-filter"
        @click="isFilterShow = false"
        :class="{ 'display-inline': isFilterShow }"
        src="../assets/recruit/close-svgrepo-com.svg"
        alt="关闭筛选"
      >
    </h3>
    <div
      class="radio-group"
      id="group-filter"
      :class="{ 'display-block': isFilterShow }"
    >
      <!-- 原有筛选表单内容放在这里 -->
    </div>
  </div>
</template>

脚本部分 #

export default {
  data() {
    return {
      // 筛选面板默认隐藏
      isFilterShow: false
    }
  }
}

不需要写自定义display类，直接用内置的v-show指令控制显隐即可，完全替代原生DOM操作样式的逻辑：

<template>
  <div class="job-filter">
    <h3>
      Filter
      <img
        id="icon-filter"
        @click="isFilterShow = true"
        v-show="!isFilterShow"
        src="../assets/recruit/angle-down-svgrepo-com.svg"
        alt="展开筛选"
      >
      <img
        id="icon-close-filter"
        @click="isFilterShow = false"
        v-show="isFilterShow"
        src="../assets/recruit/close-svgrepo-com.svg"
        alt="关闭筛选"
      >
    </h3>
    <div
      class="radio-group"
      id="group-filter"
      v-show="isFilterShow"
    >
      <!-- 原有筛选表单内容放在这里 -->
    </div>
  </div>
</template>

内容的提问来源于stack exchange，提问作者BinChanhKun