如何在vue.js中转义大括号 [英] how to escape curly braces in vue.js

问题描述

我的 数据库 中有 数据 ，其中可能包含花括号 {{}} .

{{-- inside app.blade.php --}}
<!-- vue app -->
<div id="app">
    ...code
    <div> {{ $data }} </div>
    ...code
</div>

因此，如果我想向用户显示此数据，则该数据会在Vue应用程序内部时引起问题.并认为这是要执行的javascript代码.

so if I want to display it to the user this data cause problem if it's inside Vue app. and vue think it's javascript codes to execute.

例如，如果 $ data 等于 {{title-> links()}} ，那么我会收到错误消息，并且整个应用都无法编译完全没有.(它通过刀片模板).

for example if the $data is equal to {{ title->links() }} then I get an error and the whole app doesn't compile at all. (it passes the blade template).

[Vue warn]: Error compiling template:

invalid expression: expected expression, got '>' in

    _s(title->links())

  Raw expression: {{ title->links() }}

305|              <div>{{ title-&gt;links() }}</div>
   |                   ^^^^^^^^^^^^^^^^^^^^^^^

逃避 {{}} 用户数据大括号的最佳方法是什么(在Vue.js中)?

what is the best way to escape {{ }} curly braces for user data (in Vue.js)??

推荐答案

您需要使用 v-pre 或 v-html 指令:

< div v-pre> {{data}}</div>

或

< div v-html ='''{{data}}'''></div>

ref链接 https://vuejs.org/v2/api/#v-pre

这篇关于如何在vue.js中转义大括号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！