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代码作为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

从vuejs方法返回元素

1 个答案: