从 vuejs 方法返回元素答案

【问题标题】：return elements from a vuejs method从 vuejs 方法返回元素
【发布时间】：2018-10-15 09:51:00
【问题描述】：

我对 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 组件，我似乎无法理解我需要如何执行此操作，或者即使我对此有正确的方法。

【问题讨论】：

标签： vuejs2 nuxt.js

【解决方案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代码返回为string或template string

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

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

【讨论】：