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

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