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

时间：2018-05-18 15:41:50 阅读：2936 评论：0 收藏：0 [点我收藏+]

标签：exp dex port AC cli style html name uid

for循环中动态设置页面的图标或者字体颜色与循环中且套循环

:style="{‘color‘:items.color}"

案例代码：

　　html中

　　</div>

　　　　　　<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>

js中

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中渲染页面，动态设置颜色

标签：exp dex port AC cli style html name uid

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

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行