Vuejs2 从vuejs方法返回元素

我对vuejs有点陌生，我甚至不确定我到底在寻找什么， 我有这个模板：

<template>
    <md-content class="md-elevation-2">
        <div class="md-layout">
            <div class="md-layout-item" v-for="key in ruleData">
                {{ getKeyOutput(key) }}
            </div>
        </div>
    </md-content>
</template>

{{getKeyOutput（key）}

我的剧本是：

<script>
    export default {
        props: ['ruleData'],
        methods: {
            getKeyOutput(value) {
                switch (typeof value) {
                    case 'string':
                        if (/(ban)$/g.test(value)) {
                            return createElement(`<h1>${ value }</h1>`)  // here is the problem
                        } else {
                            return value
                        }
                        break
                    case 'number':
                        return String(value)
                        break
                    case 'boolean':
                        return String(value)
                        break
                    default:
                        return value
                        break
                }
            }
        }
    }
</script>

导出默认值{
道具：['ruleData']，
方法：{
getKeyOutput（值）{
开关（值类型）{
大小写“string”：
如果（/（禁止）$/g.测试（值））{
return createElement（`${value}`）//问题出在这里
}否则{
返回值
}
打破
案件编号：
返回字符串（值）
打破
“布尔”大小写：
返回字符串（值）
打破
违约：
返回值
打破
}
}
}
}

---

我想做的是在某些情况下返回字符串，在其他一些情况下，例如返回一个HTML组件，如h1，我似乎无法理解我需要如何执行此操作，或者即使我有正确的方法执行此操作。

您必须使用

v-HTML

指令来呈现存储为字符串的HTML标记

如果不使用

v-html

，则默认情况下，vuejs将转义html标记，因此html标记显示为纯文本。您不需要在代码中的任何位置使用

createElement（）

，只需将其删除即可

按如下所示更改vue模板代码，并验证是否获得了预期结果

<div 
    class="md-layout-item" 
    v-for="(value,key) in ruleData" 
    :key="key" 
    v-html="getKeyOutput(value)">
</div>

阅读文档中有关

v-html

的更多详细信息

if (/(ban)$/g.test(value)) {
    return `<h1>${ value }</h1>`; //problem solved
 } else {
    return value
 }