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中渲染页面,动态设置颜色的更多相关文章

  1. iOS-UITextField中给placeholder动态设置颜色的四种方法

    思路分析: 0.自定义UITextField 1.设置占位文字的颜色找-->placeholderColor,结果发现UITextField没有提供这个属性 2.在storyboard/xib中 ...

  2. 【原创】如何在Android中为TextView动态设置drawableLeft等

    如何在Android中为TextView动态设置drawableLeft等   两种方式:   方式1:手动设置固有边界 Drawable drawable = getResources().getD ...

  3. vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改

    vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改.vue <div class="commonHeader" v-bind:class=" ...

  4. vue中在页面渲染完之后获取元素(否则动态渲染的元素获取不到)

    两种方法: 方法一: 使用$nextTick,在异步获得数据之后再获取元素: 方法二: 在then之后再获取该元素: 问题2:vue中监听改变数组的方法: let idx =; this.listIn ...

  5. vue中的页面渲染方案

    一.模板渲染 <div id="J_render_app"> <ul v-if="items.length"> <li v-for ...

  6. vue中嵌套页面(iframe)

    vue中嵌套iframe,将要嵌套的文件放在static下面.(要将打包文件整体放在statici里,我的文件名是canvas) src可以使用相对路径,也可使用服务器根路径http:localhos ...

  7. router-view组件在app.vue中渲染不出来怎么办

    1.在app.vue使用router-view组件直接渲染 页面什么都没显示,可能问题出在路由配置上了,检查路由是否配置完好,路由挂载那里必须使用routes属性 2.在app.vue中router- ...

  8. Vue 中渲染字符串形式的组件标签

    在vue中如果要渲染字符串形式的标签,vue 提供了 v-html 指令,可以很方便的渲染出来.但是如果这个标签是一个组件,或者element-ui 的组件时,就不能解析出来了,因为v-html 只能 ...

  9. vue中嵌套页面 iframe 标签

    vue中嵌套iframe,将要嵌套的文件放在static下面: <iframe src="../../../static/bear.html" width="300 ...

随机推荐

  1. MUI框架-07-HBuilder+夜神安卓模拟器

    MUI框架-07-HBuilder+夜神安卓模拟器 有时候我们在 HBuilder 里面 web 浏览器预览我们的 MUI 项目界面时,总感觉这个 web 浏览器随便拖拉比例,大小可调,但它毕竟是浏览 ...

  2. CentOS下二进制包/源码安装方式的MySQL卸载步骤

    查看当前系统mysql 运行状态 [root@zendlinux ~]# ps -ef |grep mysql root 1153 1 0 15:40 ? 00:00:00 /bin/sh /usr/ ...

  3. 算法之杨辉三角形(Java语言)

    杨辉三角形, 又称贾宪三角形.帕斯卡三角形. 前9层写出来如下: 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5 10 10 5 1 1 6 15 20 15 6 1 1 7 21 ...

  4. spring boot(3)-Rest风格接口

    Rest接口 虽然现在还有很多人在用jsp,但是其实这种动态页面早已过时,现在前端流行的是静态HTML+ rest接口(json格式).当然,如果是单台服务器,用动态还是静态页面可能没什么很大区别,但 ...

  5. 在C#中internal、protected internal关键字是什么意思?

    internal:就是程序集. 那么什么是程序集呢?就是“项目”也就是工程里中的csproj 比如:我有个解决方案,这个方案中有2个项目,1个是控制台程序,1个是webapi项目,那么我这个解决方案中 ...

  6. 用canvas播放scratch文件

    原文地址:https://blog.csdn.net/qq_36268036/article/details/84262540 基于Github上的scratch-render实现sb2或者sb3文件 ...

  7. kettle 合并记录

    转自: http://blog.itpub.net/post/37422/464323 看到别人的脚本用到 合并记录 步骤,学下下. 该步骤用于将两个不同来源的数据合并,这两个来源的数据分别为旧数据和 ...

  8. 如何写自定义的AlertView

    如何写自定义的AlertView 效果 说明 考虑到后面的可定制性以及可维护性,本人用AbstractAlertView定义了AlertView抽象的基类,实现通过子类来完成. 注:这只是粗略的写了一 ...

  9. 使用TFHpple解析html

    使用TFHpple解析html https://github.com/topfunky/hpple 前期准备工作 引入静态库文件 添加库文件的 header search paths(注意,必须选中 ...

  10. [翻译] FLAnimatedImage

    FLAnimatedImage FLAnimatedImage is a performant animated GIF engine for iOS: FLAnimatedImage是一个播放gif ...