我正在将代码段从纯HTML转换为VUE2，但面临一些困难

Question

这是带有JavaScript的纯HTML代码。 filter.js

var group_filter=document.getElementById("group-filter");
var btn_show_filter=document.getElementById("icon-filter");
var btn_close_filter=document.getElementById("icon-close-filter");

function showfilter(){
    group_filter.style.display='block';
    btn_show_filter.style.display='none';
    btn_close_filter.style.display='inline';
}
function closefilter(){
    group_filter.style.display='none';
    btn_show_filter.style.display='inline';
    btn_close_filter.style.display='none';
}

，这是我要处理的代码，但看起来不正确。

 <div class="job-filter">
                <h3>Filter <img id="icon-filter" @click="showfilter" :class="{ 'display-none': this.display }" src="../assets/recruit/angle-down-svgrepo-com.svg" alt=""> <img id="icon-close-filter" :class="{ 'display-inline': this.display }" @click="showfilter" src="../assets/recruit/close-svgrepo-com.svg" alt=""></h3>
                <div  class="radio-group" id="group-filter" :class="{ 'display-block': this.display}" >
</div>
     </div>

谢谢大家，我期待您的帮助。

Answer 1

您可以简单地通过在类似的数据方法中创建一个对象来实现这一目标：

data() {
  return {
    display: {
      group_filter: '',
      btn_show_filter: '',
      btn_close_filter: ''  
    }
  }
}

和方法对象，您可以分配值：

methods: {
  showfilter() {
    this.display.group_filter = 'block';
    this.display.btn_show_filter = 'none';
    this.display.btn_close_filter = 'inline';
  },
  closefilter() {
    this.display.group_filter = 'none';
    this.display.btn_show_filter = 'inline';
    this.display.btn_close_filter = 'none';
  }
}

，然后 分配在模板中，您可以像这样的分配：

<div class="job-filter">
  <h3>Filter <img id="icon-filter" @click="showfilter" :style="{ 'display': display.btn_show_filter }" src="../assets/recruit/angle-down-svgrepo-com.svg" alt=""> <img id="icon-close-filter" :style="{ 'display': display.btn_close_filter }" @click="closefilter" src="../assets/recruit/close-svgrepo-com.svg" alt=""></h3>
  <div  class="radio-group" id="group-filter" :style="{ 'display': display.group_filter }"></div>
</div>

Answer 2

我希望这就是您想要实现的目标。

我在Stackblitz上创建了一个演示。

链接 - https://vue-etrbkr.stackblitz.io

我在此处附上了源代码。

<template>
 <div id="app">
  <div class="job-filter">
  <h3>
    Filter
    <img
      @click="toggleFilter"
      class="filterIcon"
      :src="
        isFilterOpen
          ? 'https://cdn-icons-png.flaticon.com/512/61/61155.png'
          : 'https://iaeste.org/assets/icons/arrow_dropdown- 
           8e096a444299e295fa03bc919f3cea625987792e13aaf64ec6b0be881a8f7c0a.svg'
      "
      width="20"
      height="20"
    />
  </h3>
  <div class="radio-group" id="group-filter" v-if="isFilterOpen">
    Filter Content
  </div>
   </div>
  </div>
 </template>

<script>
  export default {
  name: 'App',
  data() {
    return {
     isFilterOpen: false,
   };
 },
 methods: {
  toggleFilter() {
    this.isFilterOpen = !this.isFilterOpen;
  },
 },
};
</script>

<style>    
 .filterIcon {
   vertical-align: bottom;
   cursor: pointer;
  }
 </style>