博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue中渲染页面,动态设置颜色
阅读量:4931 次
发布时间: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

你可能感兴趣的文章
[BZOJ4668]冷战(并查集)
查看>>
集合中线程安全的类
查看>>
安装Oracle9i,遇到“File not found D: \oracle\ora92\ocs4j\admin\OCS4J.properties”
查看>>
MapReduce计算模型
查看>>
JavaScript 错误处理
查看>>
风险评估的实施步骤
查看>>
nodejs异步IO的实现
查看>>
回首2015,收获和付出
查看>>
string.format
查看>>
JavaScript -- 语法和数据类型
查看>>
JavaScript -- DOM
查看>>
ALSA声卡驱动中的DAPM详解之四:在驱动程序中初始化并注册widget和route
查看>>
链栈的初始化,建立,插入,查找,删除。
查看>>
Android中Input型输入设备驱动原理分析<一>
查看>>
Jquery消息提示插件toastr使用详解
查看>>
java读取远程url图片,得到宽高
查看>>
合并两个DataSet的数据内容
查看>>
网络模型 - 每天5分钟玩转 Docker 容器技术(169)
查看>>
关于近乎安装卡在了链接数据库的向导页面问题的解决办法分享
查看>>
抽象类简单举例
查看>>