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

Posted 2023-02-22

【中文标题】在 Laravel Blade 中转义 VueJS 数据绑定语法？

【英文标题】：Escape VueJS data binding syntax in Laravel Blade?

【发布时间】：2016-10-22 09:27:20

【问题描述】：

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

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

例子：

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

【参考方案1】：

在问这个问题时，我发现您可以通过在双括号 或 !! !! html 呈现括号之前添加 @ 符号来逃避 Laravel 的 Blade。

所以这里是答案：

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

【讨论】：

在你答案的第三行...你能解决这个问题吗，所以装订的每一侧都有 2 个括号而不是 3 个。编辑对我来说太小了

@calbear47 您能否在评论中写一个示例并简要说明更新原因。

@ selectedQuestionDesc 应该是@ selectedQuestionDesc

【参考方案2】：

为了输出真正的 HTML，你需要使用 v-html 指令：

<p>Using v-html directive: <span v-html="rawHtml"></span></p>