Question

Laravel模板语言Blade和VueJS数据绑定语法非常相似。

如何在*.blade.php文件中转义VueJS数据绑定语法？

示例：

<div>
  <!-- Want it with VueJS -->
  {{ selectedQuestionDesc }}
</div>
<div>
  <!-- Want it with Laravel Blade -->
  {{ $selectedQuestionDesc }}
</div>

Answer 1

在提出问题时，我发现你可以通过在双括号@或{{}} html渲染括号之前添加{!! !!}符号来逃避Laravel的刀片。

所以这就是答案：

<div>
  <!-- HTML rendering with VueJS -->
  @{{ selectedQuestionDesc }} 
  <!-- Data binding with VueJS -->
  @{{ selectedQuestionDesc }}
</div>
<div>
  <!-- HTML with Laravel Blade -->
  {!! $selectedQuestionDesc !!}
  <!-- Variable binding with Laravel Blade -->
  {{ $selectedQuestionDesc }} 
</div>

Answer 2

要输出真实的HTML，您需要使用v-html指令：

const react = document.createElement("script");
react.src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js"
document.body.appendChild(react);

const reactDom = document.createElement("script");
reactDom.src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js"
document.body.appendChild(reactDom);

const babel = document.createElement("script");
babel.src = "https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"
document.body.appendChild(babel);

const rootDiv = document.createElement("div");
rootDiv.id = "app";
rootDiv.style="width: 100px; height: 100px; position: absolute; top: 0px; left: 0px; z-index: 999999";
document.body.appendChild(rootDiv);

setTimeout(() => {
  const babelScript = document.createElement("script");
  babelScript.type = "text/babel";

  const jsxCode = "ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('app'));"

  const babelTransformCode = Babel.transform(jsxCode, { presets: ["react"] } ).code;

  eval(babelTransformCode);
}, 5000)

在Laravel Blade中转义VueJS数据绑定语法？

2 个答案: