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

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 有两个非常“自以为是”烦人的问题急期待大家解决!
  • ¥30 STM32 INMP441无法读取数据
  • ¥100 求汇川机器人IRCB300控制器和示教器同版本升级固件文件升级包
  • ¥15 用visualstudio2022创建vue项目后无法启动
  • ¥15 x趋于0时tanx-sinx极限可以拆开算吗
  • ¥15 pyqt信号槽连接写法
  • ¥500 把面具戴到人脸上,请大家贡献智慧,别用大模型回答,大模型的答案没啥用
  • ¥15 任意一个散点图自己下载其js脚本文件并做成独立的案例页面,不要作在线的,要离线状态。
  • ¥15 各位 帮我看看如何写代码,打出来的图形要和如下图呈现的一样,急
  • ¥30 c#打开word开启修订并实时显示批注