Vue.js 2 中方法返回复杂 HTML 内容
在 Vue.js 2 中，可以使用模板字符串来返回比较复杂的 HTML 内容。模板字符串使用反引号（`）包裹，并可以包含多行文本和插值表达式。
例如，考虑以下 Vue 组件的例子：
<template>
<div>
<h1>{{ title }}</h1>
<div v-html='getComplexHTML'></div>
</div>
</template>
<script>
export default {
data() {
return {
title: '复杂HTML示例'
}
},
methods: {
getComplexHTML() {
return `
<p>这是一个复杂的HTML片段：</p>
<ul>
<li v-for='item in items'>{{ item }}</li>
</ul>
`
}
},
computed: {
items() {
// 返回一些数据
return ['项目1', '项目2', '项目3']
}
}
}
</script>
在上面的示例中，`getComplexHTML` 方法返回一个包含多行 HTML 的模板字符串。然后，我们使用 `v-html` 指令将该方法的返回值渲染到 `
` 元素中。
请注意，使用 `v-html` 指令时要小心，因为它可以导致跨站脚本攻击（XSS）。确保只在可信任的内容上使用 `v-html`，或者在渲染之前进行适当的转义和过滤。
原文地址: http://www.cveoy.top/t/topic/pkt0 著作权归作者所有。请勿转载和采集!