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>
 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM