Escape VueJS data binding syntax in Laravel Blade?

Question

Laravel templating language Blade and VueJS data binding syntax are very similar.

How can I escape VueJS data binding syntax when in a *.blade.php file?

Example:

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

Answer 1

While asking the question I discovered that you can escape Laravel's Blade by prepending an @ sign before the double brackets {{}} or the {!! !!} {!! !!} html rendering brackets.

So here is the answer:

<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指令：

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