如何在 vue.js 中转义大括号

Question

我的数据库[=30=中有数据 ] 可能包含花括号{{ }}.

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

所以如果我想向用户显示它，如果它在 Vue 应用程序中，这个数据会导致问题。并且 vue 认为它是 javascript 要执行的代码。

例如，如果 $data 等于 {{ title->links() }}，那么我会收到错误消息，整个应用程序根本无法编译。 （它通过了 blade 模板）。

[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 中）？？

Answer 1

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

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

或

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

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