{{}}模板语法,请问该如何实现数组的单独显示

Question

<div>
...
         <div>
            <div>
              <img />
               <!-- 该img里的引用不同-->
            </div>
            <div >
              <div>{{ CountFive.Value }}</div>
              <div>{{ CountFive.Name }}</div>
            </div>
        </div>
        <div>
            <div>
              <img />
               <!-- 该img里的引用不同-->
            </div>
            <div >
              <div>{{ CountSex .Value }}</div>
              <div>{{ CountSex .Name }}</div>
            </div>
          </div>
     </div>
...
        </div>

        this.Counts=[
            {Value :12,Name:助手},
            {},
            {},
            {},
             ...
        ];
        this.CountOne = this.Counts[0]; 
        this.CountTwo = this.Counts[1];
        this.CountThree = this.Counts[2];
        this.CountFour = this.Counts[3];
        this.CountFive = this.Counts[4];
        this.CountSex = this.Counts[5];
        this.CountSeven = this.Counts[6];
        this.CountEight = this.Counts[7];

有没有更简洁一点的方法实现这个效果呐？

Answer 1

请问你是要显示数组的内容嘛，用v-for循环

 <div v-for="(item,index) in Counts" :key="index“”>
            <div>
              <img />
               <!-- 该img里的引用不同-->
            </div>
            <div >
              <div>{{ item.Value }}</div>
              <div>{{ item.Name }}</div>
            </div>
        </div>