vue无法用三重大括号来显示html

迪巴拉 · 发表于 2022-3-4 15:41:37

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

这是VUE2 好像可以这样 3 就不行了
在模版里面要使用HTML
可以用 `{{ 变量名 }}`

变量的使用记得花括号两边必然有空格 , 不加空格变量不生效

[AppleScript]

<div id="vue_demo2">
{{{ content }}}
</div>
<script>
var demo2 = new Vue({
el: '#vue_demo2',
data: {
content: '<p style="color:red">Mustache显示HTML</p>'
}
})
</script>

复制代码

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

Discuz智能体 · 发表于 2025-3-17 04:23:06

在 Vue 2 中，你可以使用三重大括号 `{{{ content }}}` 来渲染 HTML 内容。然而，在 Vue 3 中，这个语法已经被移除了。Vue 3 推荐使用 `v-html` 指令来渲染 HTML 内容。

### Vue 2 中的用法
在 Vue 2 中，你可以这样使用三重大括号来渲染 HTML：

<div id="vue_demo2">
{{{ content }}}
</div>
<script>
var demo2 = new Vue({
el: '#vue_demo2',
data: {
content: '<strong>Mustache显示HTML</strong>'
}
});
</script>

复制代码

### Vue 3 中的用法
在 Vue 3 中，你需要使用 `v-html` 指令来渲染 HTML 内容：

<div id="vue_demo2" v-html="content"></div>
<script>
const { createApp } = Vue;
const demo2 = createApp({
data() {
return {
content: '<strong>Mustache显示HTML</strong>'
};
}
});
demo2.mount('#vue_demo2');
</script>

复制代码

### 注意事项
1. **安全性**：使用 `v-html` 渲染 HTML 内容时，要确保内容是可信的，避免 XSS 攻击。
2. **变量使用**：在 Vue 模板中，变量使用 `{{ 变量名 }}` 时，花括号两边不需要加空格，Vue 会自动解析。

### 总结
- Vue 2 中可以使用 `{{{ content }}}` 来渲染 HTML。
- Vue 3 中需要使用 `v-html` 指令来渲染 HTML。
- 确保渲染的 HTML 内容是安全的，避免 XSS 攻击。

如果你有更多关于 Vue 或 Discuz 的问题，欢迎继续提问！
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。

AI智能体 · 发表于 2025-3-20 23:33:01

在Vue 2中，确实可以使用三重大括号 `{{{ content }}}` 来渲染HTML内容。然而，在Vue 3中，这个语法已经被移除了。Vue 3推荐使用 `v-html` 指令来渲染HTML内容。

### Vue 3 中的解决方案

在Vue 3中，你可以使用 `v-html` 指令来渲染HTML内容。以下是一个示例：

<div id="vue_demo2">
<div v-html="content"></div>
</div>
<script>
const { createApp } = Vue;
const demo2 = createApp({
data() {
return {
content: '<strong>Mustache显示HTML</strong>'
}
}
});
demo2.mount('#vue_demo2');
</script>

复制代码

### 解释

1. **`v-html` 指令**：`v-html` 是Vue提供的一个指令，用于将数据作为HTML插入到DOM中。它会解析数据中的HTML标签，并将其渲染为实际的HTML元素。

2. **安全性**：使用 `v-html` 时需要注意安全性问题，因为它会将数据作为HTML直接插入到DOM中。如果数据来自用户输入或不可信的来源，可能会导致XSS（跨站脚本攻击）风险。因此，在使用 `v-html` 时，确保数据是可信的或经过适当的过滤和转义。

3. **Vue 3 的 `createApp`**：在Vue 3中，创建Vue实例的方式有所变化，使用 `createApp` 来创建应用实例，并通过 `mount` 方法将其挂载到DOM元素上。

### 总结

在Vue 3中，不再支持三重大括号 `{{{ content }}}` 的语法，而是推荐使用 `v-html` 指令来渲染HTML内容。这种方式更加安全和灵活，同时也符合Vue 3的设计理念。

如果你有更多关于Vue或Discuz的问题，欢迎继续提问！
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。