Vue JS：如果其类与页面上的另一个类匹配，则显示 div答案

【问题标题】：Vue JS: Show div if its class matches another class on the pageVue JS：如果其类与页面上的另一个类匹配，则显示 div
【发布时间】：2021-09-24 10:40:55
【问题描述】：

我希望 div 显示内容是否在 X 和 Y 中包含相同的单词，否则我希望将其隐藏。因此，在下面的示例中，前 2 个 Y 元素将显示，而其他元素将被隐藏。

有人可以帮忙吗？

 <div class="X">Apples</div>

 <div class="Y">Apples</div>
 <div class="Y">Apples, Bannanas, Pears</div>
 <div class="Y">Bannanas, Pears</div>
  <div class="Y">Pears</div> 


myCriteria() {
      var element = document.getElementsByClassName("X, Y");
      {
        if (X === Y) {
          element.style.display = "block";
        } else {
          element.style.display = "none";
        }
      }
    },

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

哇，你完全违反了 VueJS...

我建议如下：

new Vue({
  el: "#app",
  data: {
    x: "Apples",
    y: [
      "Apples",
      "Apples, Bannanas, Pears",
      "Something else"
    ]
  },
  methods: {
    filteredDivs: function() {
      return this.y.filter(el => {
        let elementsInCurrentElement = el.split(',');
        for (let temp of elementsInCurrentElement) {
          if (temp.trim() === this.x) {
            return true;
          }
        }
      });
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    {{x}}
  </div>
  <div v-for="element in filteredDivs()">
    {{element}}
  </div>
</div>

【讨论】：

哦，我感到羞耻！感谢您的代码。非常感谢。
@user13928344 我看到你有提问的倾向，而不是接受或投票任何答案。 15，只有 2 个被接受的答案。你不应该这样做，当接受 anwser 时，除了给花时间帮助你的人一点点之外，还标记为其他人解决的问题。这里的人往往会在空闲时间帮助他人，你应该承认这一点。
我向所有人道歉。我会确保我将来会这样做。

【解决方案2】：

下面的函数会做你想做的事……请注意，你会希望通过添加错误检查来使代码更加健壮，以确保只有一个元素具有类 X；与使用类相比，使用特定元素 ID 查找过滤器源 div 可能会更好。但这取决于你。

function myCriteria() {
  var elementListX = document.getElementsByClassName("X");
  var elementListY = document.getElementsByClassName("Y");

  var elementX = elementListX[0];
  for (var index = 0; index < elementListY.length; index++) {
    var element = elementListY[index];
    if (element.innerText.indexOf(elementX.innerText) >= 0) {
      element.style.display = "block";
    } else {
      element.style.display = "none";
    }
  }
}

<html>

<body onLoad="myCriteria()">
  <div class="X">Apples</div>

  <div class="Y">Apples</div>
  <div class="Y">Apples, Bannanas, Pears</div>
  <div class="Y">Bannanas, Pears</div>
  <div class="Y">Pears</div>
</body>

</html>

【讨论】：

【解决方案3】：

像这样？

这只是 JS 解决方案，你不应该在 Vue 中这样做（而且你根本没有显示 Vue 应用程序代码）。但是由于您的尝试只是 JS，因此您可以这样做：

这源于您有多个 X，然后搜索 Y，而不是其他方式，因为您没有指定，但在示例中确实提到了。

[...document.querySelectorAll('.X')].forEach(x => {
  [...document.querySelectorAll('.Y')].forEach(y => {
    y.innerText.includes(x.innerText) ? y.style.display = "block" : y.style.display = "none"
  })
})

<div class="X">Apples</div>

<div class="Y">Apples</div>
<div class="Y">Apples, Bannanas, Pears</div>
<div class="Y">Bannanas, Pears</div>
<div class="Y">Pears</div>

另外：getElementsByClassName() with two classes getelementsbyclassname 不接受 2 个参数。

【讨论】：

querySelectorAll() 返回一个 NodeList。而DOCSforEach是是NodeList的原型（方法）——因此你不需要解构。
不要使用innerText - 请改用textContent。这是一个常见的错误，因为它类似于 innerHTML 我知道。
另外，您不需要使用 O(n2) 复杂度。首先将您的.X 字符串放入一个变量中，而不是仅遍历.Y 元素。 jsfiddle.net/9nx82smL 相同的输出，更简洁的代码 - 即使它与 OP 关于使用 Vue 的问题无关。