细粒丁 2021-08-02 23:47 采纳率: 100%
浏览 460
已结题

Vue怎么动态插入html代码

举个例子:

    data: {
        detailBlock: [
            {
                label: "路径",
                attribute: "{{showMsg.path}}"
            }, {
                label: "名称",
                attribute: "{{showMsg.filename}}"
            }, {
                label: "标签",
                attribute: "{{showMsg.tag}}"
            }
        ],
        showMsg: {
            path: "path",
            filename: "filename",
            tag: "tag"
        },
        test: [
            {
                label: "路径",
                attribute: "showMsg.path"
            }, {
                label: "名称",
                attribute: "showMsg.filename"
            }, {
                label: "标签",
                attribute: "showMsg.tag"
            }
        ]
    },
  <div>
    <label v-for="(item,index) in detailBlock">
        {{item.attribute}}
    </label>
  </div>

就是我想让他显示的是:
path
filename
tag

但如果像现在这样写的话就显示:
{{showMsg.path}}
{{showMsg.filename}}
{{showMsg.tag}}

而且他又不能 {{ {{ ··· }} }}

这样写直接报错
  <div>
    <label v-for="(item,index) in test">
        {{ {{ item.attribute }} }}
    </label>
  </div>

试过用`$[···]也不管用

不知大家有什么好的建议……

  • 写回答

3条回答 默认 最新

  • 关注

    detailBlock改成

        detailBlock: [
            {
                label: "路径",
                attribute: "showMsg.path"
            }, {
                label: "名称",
                attribute: "showMsg.filename"
            }, {
                label: "标签",
                attribute: "showMsg.tag"
            }
        ],
    

    html是

      <div>
        <label v-for="(item,index) in detailBlock">
             {{ eval(item.attribute) }}
        </label>
      </div>
    

    或者detailBlock改成

        detailBlock: [
            {
                label: "路径",
                attribute: "path"
            }, {
                label: "名称",
                attribute: "filename"
            }, {
                label: "标签",
                attribute: "tag"
            }
        ],
    

    html是

      <div>
        <label v-for="(item,index) in detailBlock">
            {{showMsg[item.attribute]}}
        </label>
      </div>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 8月16日
  • 已采纳回答 8月8日
  • 创建了问题 8月2日

悬赏问题

  • ¥15 如何获取vue-video-editor?
  • ¥100 vs2019 mfc程序如何实现64*64/48*48大小的真彩色工具栏
  • ¥15 全志v3s耳机音频输出口怎么外接功放
  • ¥15 华为ensp使用基本ACL限制公司网络访问
  • ¥15 帮我做下照片上的PLC题
  • ¥15 labview2022 使用modbus报缺少依赖?
  • ¥15 谷歌地图是不是不开通结算功能,api会使用不了哦
  • ¥15 unity腾讯云对象存储机型适配
  • ¥15 求全国交通咨询模拟代码,要求如下,可以完全在dev c++运行
  • ¥15 根据要求修改程序编码