博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue中渲染页面,动态设置颜色
阅读量:4932 次
发布时间:2019-06-11

本文共 1286 字,大约阅读时间需要 4 分钟。

for循环中动态设置页面的图标或者字体颜色与循环中且套循环 

:style="{'color':items.color}"

案例代码:

  html中

<div class="allFunction" v-for="(item,index ) in checksMes">
  <div class="titMes" data-index="dictionaries">
    {
{item.menu.menuTitle}}
  </div>
  <div id="addBtn" v-for="(items,indexs ) in item.funcList" >
      <Icon class="iconCommon" :style="{'color':items.color}" :type="items.type"></Icon><span>{
{items.funcName}}</span> <span class="triangle"></span><Icon     class="imgIcon" type="checkmark-round"></Icon>
  </div>
</div>
js中
<script type="javascript">
export default {
    data () {   
       mainMessage:[ //原始数据类型
        {
        "menu": {
          "id": 2,
          "menuId": "test1",
          "menuParentId": "test",
          "menuPath": null,
          "menuIcon": null,
          "checks":"0",
          "menuTitle": "测试菜单1",
          "menuPage": null,
          "menuValid": null,
          "menuOrder": null,
          "menuCreateTime": null,
          "menuUpdateTime": null
          },
      "funcList": [  
          {
          "id": null,
          "funcId": "deleteBtn",
          "funcName": "删除",
          "type":"trash-a",
          "color":"red",
          "funcDesc": "1"
          }
        ]
      }
    ]
  }
}
</script>
 

 

转载于:https://www.cnblogs.com/ericLJ/p/9056122.html

你可能感兴趣的文章
双活数据中心的架构
查看>>
大数据公司Palantir融得7亿美元 曾追踪拉登
查看>>
先行者长虹佳华超融合市场沙龙在京举行
查看>>
建立备份策略的重要性
查看>>
小白用户如何轻松上云 -我的轻量应用服务器探索记
查看>>
BCG与阿里研究院等联合揭秘中国互联网经济:成功的关键是什么?
查看>>
发力IoT领域 Marvell注重生态系统发展
查看>>
数据中心网络布线工程必备七大件
查看>>
20个问题揭穿冒牌数据科学家
查看>>
你应该知道的 RPC 原理
查看>>
Ubuntu安装词典
查看>>
KVM虚拟机在线添加网卡
查看>>
Spring解析
查看>>
支付宝签约教程及注意事项
查看>>
Linux Glibc溢出漏洞凶猛来袭 可让***者获取操作系统的控制权限
查看>>
设计模式之原则
查看>>
Maven修改全局和局部JDK版本
查看>>
设计模式——组合模式(Composite Pattern)
查看>>
java设计模式之——代理模式
查看>>
php页面防止重复提交
查看>>