Vue怎么动态插入html代码

Question

举个例子：

    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>

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

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

Answer 1

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>