首页 > 其他 > 详细

vue中渲染页面,动态设置颜色

时间:2018-05-18 14:52:56      阅读:421      评论:0      收藏:0      [点我收藏+]

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>
 

 

vue中渲染页面,动态设置颜色

原文:https://www.cnblogs.com/ericLJ/p/9056122.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!