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. 解决linux下fflush(stdin)无效

    void clean_stdin(void) { int c; do { c = getchar(); } while (c != '\n' && c != EOF); }

  2. C#实现字符串相似度算法

    字符串的相似性比较应用场合很多,像拼写纠错.文本去重.上下文相似性等. 评价字符串相似度最常见的办法就是: 把一个字符串通过插入.删除或替换这样的编辑操作,变成另外一个字符串,所需要的最少编辑次数,这 ...

  3. npm使用过程中的一些错误解决办法及npm常用命令和技巧

    node,npm在前端开发流程中提供了非常完善的自动化工具链,但是同样由于其复杂性导致有很多奇奇怪怪的问题.本文将记录使用过程中出现的一些问题及其解决方法备案. 国内由于gfw问题,导致很多国外的网站 ...

  4. VS2013个版本密钥(亲测可用)

    Visual Studio Ultimate 2013 KEY(密钥):BWG7X-J98B3-W34RT-33B3R-JVYW9 Visual Studio Premium 2013 KEY(密钥) ...

  5. 如何提高Ajax性能

    1.适当使用缓存机制 2.使用CDN内容分发来访问Jquery脚本: (1)自己公司架设CDN服务器 (2)使用第三方公司的,比如微软,谷歌等公司的CDN,但有时候不太靠谱 3.JS/CSS文件的打包 ...

  6. 企业级Nginx增加日志选项

    日志介绍 目的:将用户的访问信息记录到指定的文件中由ngx_http_log_module模块负责 访问日志参数: access_log:指定日志文件的路径和使用何种日志格式记录日志 log_form ...

  7. [T-ARA][Cry Cry]

    歌词来源: Cry Cry:http://music.163.com/#/song?id=22704434 Cry Cry (Ballad Ver.):http://music.163.com/#/s ...

  8. MySQL 触发器-更新字段时,status列会加一

    需求:当更新列中的字段时,列中的status字段,就会+1 表结构 CREATE TABLE `test_1` ( `id` int(11) DEFAULT NULL, `name` varchar( ...

  9. BZOJ 1041 圆上的整点 数学

    题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1041 题目大意:求一个给定的圆(x^2+y^2=r^2),在圆周上有多少个点的坐标是整 ...

  10. swift动态库与use_frameworks

    使用Dynamic 的优势: 模块化,相对于Static Library,Framework可以将模块中的函数代码外的资源文件打包在一起. 共享可执行文件 iOS 有沙箱机制,不能跨App间共享共态库 ...