vue clicks to display the data from a single loop

Let’s take a look at the page effect. This is all recycled data.

 This is what we want to achieve

 All fields returned by the interface are in the same object.

 What I use here is  document.querySelectorAll 

When we loop to render the page, add the css attribute   display: none;  to the following tag  to hide it directly.

Then in the click event

let elem = document.querySelectorAll(".official");
// 这里的 elem 返回的是个数组 数组里面是class名为 official 的所有标签
// 循环这个数组
for (var i = 0; i < elem.length; i++) {
     // 在点击的时候就先让他们所有都隐藏
     // 如果没有这一步的话 在点击完第一个然后再带点击第二个的时候第一个不会隐藏掉
     elem[i].style["display"] = "none";
     // 进行判断
     // 如果 点击的id 等于 这个数组index 值+1 就让这个标签显示出来
     if (this.feudalBar == i + 1) {
          elem[i].style["display"] = "block";
      }
}