• 效果图:

只手写了第一个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; });
 }
}
},

知识点6: v-for列表循环的更多相关文章

  1. html+css+javascript实现列表循环滚动示例代码

    使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...

  2. 小程序:怎么在两层列表循环(wx:for)的时候判断是否为最后一个元素

    问题说明: 如下图所示,在箭头所指的最后一个选项的底线与底部操作栏的上边线重叠,需要清除掉最后一个元素的底线: 想到的解决方案:  通过判断是否为最后一个元素,然后通过条件渲染(wx:if)动态添加对 ...

  3. shell脚本之for 列表循环

    作用:对列表进行循环处理 语法: for var in list do commands done 案例: 1.读取列表中的值 2.读取列表中的复杂值 异常案例:未显示出“'”单引号,使语句出现异常 ...

  4. vue数据渲染、条件判断及列表循环

    1.数据渲染  {{msg}} <template> <div id="app"> {{msg}} </div> </template&g ...

  5. 【学习笔记】--- 老男孩学Python,day8 知识点补充 join,列表不能循环删除,深浅copy

    1. 补充基础数据类型的相关知识点 1. str. join() 把列表变成字符串 2. 列表不能再循环的时候删除. 因为索引会跟着改变 3. 字典也不能直接循环删除. 把要删除的内容记录在列表中. ...

  6. vue里面的v-for列表循环

    列表渲染 v-for v-for可以把数据中的一个数组对应为一组元素v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名. ...

  7. selenium 列表循环定位方法。

    话不多说,直接上代码. 就是循环第一层,然后拼接,然后继续循环,继续屏接,任你多少层都不是问题. def c_select(self, values, text): """ ...

  8. vue之列表循环

    文档:https://cn.vuejs.org/v2/guide/list.html 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略.如果数据项的顺序被改变, ...

  9. li列表循环滚动的简单方法,无需插件,简单方法搞定

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 关于dict的formkeys方法注意

    使用容器中的元素生成k, v为统一值, 指向同一个内存地址 默认值指向同一个内存, 修改就全部修改 strvar = 'abcd' listvar = [] dictvar = {} dictvar ...

  2. web前端 3大储存 Cookie、localStorge、sessionStorage

    Cookie: //setCookie function setCookie(name,value){ var Days = 30; var exp = new Date(); exp.setTime ...

  3. 配置Jsp错误页面

    配置Jsp错误页面一般我们有2种做法: (1)在页面中用指令进行配置,即page指令的errorPage和isErrorPage:可以使用page指令的errorPage来指定错误页!在当前JSP页面 ...

  4. 各种波形文件VCD,VPD,SHM,FSDB生成的方法

    转载---http://www.cnblogs.com/zeushuang/archive/2012/11/14/2769640.html 仿真是IC设计不可或缺的重要步骤,仿真后一般需要记录下波形文 ...

  5. CSS便捷开发小工具汇总

    1.Prefix free 可以帮助开发者省去编写各种CSS3属性前缀的工作,只需要在页面中引入prefixfree.js即可. 2. Normalize 是一个CSS Reset工具, 相比传统的R ...

  6. .net百度编辑器的使用

    1.前端引用 <%@ Page ValidateRequest="false" Language="C#" AutoEventWireup="t ...

  7. 《Linux 性能及调优指南》2.4 基准工具

    翻译:飞哥 (http://hi.baidu.com/imlidapeng) 版权所有,尊重他人劳动成果,转载时请注明作者和原始出处及本声明. 原文名称:<Linux Performance a ...

  8. elastalert新增自定义警告推送

    举例,博主公司有自己的内部通讯工具(类似QQ),接下来用IM代称该工具.于是希望elastalert的警告推送可以支持IM的公众号群发功能. 等博主这个月知识库写了再来补充hah

  9. python2.7中不同类型之间的比大小

    可以看到,字符串为空的时候也比数字类型大,这是因为python2.7中按照如下规则进行比较: 1.任何两个对象都可以比较. 2.相同类型的对象(实例),如果是数字型(int/float/long/co ...

  10. jmeter插件如何协助进行内存监控 之 PerfMon Metrics Collector设置

    参考文章: http://www.cnblogs.com/zhaoxd07/p/5197669.html 当然最重要的是自己的实践,之前试的别人用的老的包 如XXstand.jar,结果并没有成功. ...