vue中渲染页面，动态设置颜色
Posted 街角的&守望
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于vue中渲染页面，动态设置颜色的主要内容，如果未能解决你的问题，请参考以下文章