知识点6: v-for列表循环

• 效果图：

只手写了第一个dom:

剩下4个dom由v-for生成.

• html

    <div class="item" id="item">
      <div class="title">攻击源IP&nbsp;&nbsp;TOP5(G)</div>
      <div class="content" >
        <!-- content_item 遍历 -->
      <div class="content_item" v-for="item in dataset" :key="item.index">
        <!-- ip -->
          <div class="ip">
            {{item.ip}}
          </div>
          <!-- address -->
          <div class="address">
            {{item.address}}
          </div>
          <!-- num -->
          <div class="num">
            <div class="count">
              <counter :data="item.num" :config="config2"></counter>
            </div>            
          </div>
      </div>
      </div>
    </div>

• js

data() {
    return {
      dataset: [
        {ip:"103.232.215.126", num:1.04, address: '吉林'},
        {ip:"103.232.215.126", num:1.04, address: '长春'},
        {ip:"103.232.215.126", num:1.04, address: '上海'},
        {ip:"103.232.215.126", num:1.04, address: '北京'},
        {ip:"103.232.215.126", num:1.04, address: '厦门'},
      ],
    }
}

• 接数据

　mounted() {

　　this.loadData();

　},

methods: {
    loadData() {
　　　　//接数据
      this.$http.post('indi/data', {
        'indiDsService': 1,
        'indiId': 'xxx',
        'indiType': 10,
        'parameter': {}
      }).then((res) => {
        if (res.data.data && res.data.data.length > 0) {

          res.data.data.forEach((ele, index) => {

　　　　　　//动态控制遍历到的数组=直接获取的数组dataset，这样即使手写的dataset长度不够，也可以获取全部的数据
          this.dataset = [].contact(res.data.data);

　　　　　　this.dataset[index].ip = res.data.data[index].KPI_NAME; 
　　　　　　this.dataset[index].num = res.data.data[index].KPI_VALUE; }); 
　}
 } 
},