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

问题描述

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

{{-- 在 app.blade.php 内 --}}<!-- vue 应用程序--><div id="应用程序">...代码<div>{{ $data }} </div>...代码

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

例如，如果 $data 等于 {{ title->links() }} 那么我会收到错误并且整个应用程序无法编译根本.(它通过刀片模板).

[Vue 警告]:编译模板时出错:无效的表达:预期的表达，得到>"在_s(标题->链接())原始表达式:{{ title->links() }}305|<div>{{title-&gt;links()}}</div>|^^^^^^^^^^^^^^^^^^^^^^^

为用户数据(在 Vue.js 中)转义 {{ }} 花括号的最佳方法是什么??

解决方案

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

{{ data }}

或

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

I have data in my database that may contains curly braces{{ }}.

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

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.

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>
   |                   ^^^^^^^^^^^^^^^^^^^^^^^

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

解决方案

You need use the v-pre or v-html directive:

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

or

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

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

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