vuejs2 - 从 vuejs 方法返回元素

Question

我对 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>

我的脚本是:

<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>

我想要做的是在某些情况下返回字符串，在其他一些情况下返回像 h1 这样的 HTML 组件，我似乎不明白我需要如何做到这一点，或者即使我对此有正确的方法。

Answer 1

您必须使用 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>

您不再需要使用createElement()，只需将html代码作为字符串或模板字符串返回即可

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

在文档中阅读有关 v-html 的更多详细信息 https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML