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>
我的脚本是:
<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 组件,我似乎无法理解我需要如何做到这一点,或者即使我有正确的方法。
解决方案
您必须使用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 代码作为 astring
或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
推荐阅读
- python - 无法为 pyspark 作业启用 INFO 日志记录
- react-native - 为 WEB 设置反应导航无法编译
- php - 在 Laravel 中自动生成员工编号
- mysql - 与 3M 行表的慢连接
- haskell - 更改脚手架时输入“]”上的错误解析错误
- html - bootstrap 4 轮播全屏和自动裁剪
- r - repeat loop in R to compute the cosine of 2.345 correct to 5 decimal places
- ios - 当视频来自数据库时,Html5 视频标签在 ios 中不起作用
- angular - 使用 Ionic 4 中的路由发送用户 ID、存储或发送用户 ID 的用途
- c# - ToolStripContainer 的焦点/选择问题