vue点击显示单个循环出的数据

我们看一下页面效果，这都是循环出来的数据

 这是我们要实现的

 接口返回的，所有的字段都在同一对象中。

 我这里用的是 document.querySelectorAll 

我们在循环渲染页面时，把下面那个标签加上css属性  display: none;  直接隐藏掉

然后在点击事件中

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";
      }
}