vue中渲染页面，动态设置颜色
转载声明：
本文为摘录自“博客园”，版权归原作者所有。
温馨提示：
为了更好的体验，请点击原文链接进行浏览
摘录时间：
2020-08-16 19:43:06
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>
