Laravel的Blade模板引擎与Angular均使用“{ {}}”标签冲突
2023-09-14 08:56:55 时间
由于很多 JavaScript 框架也使用花括号表明给定的表达式将要在浏览器中显示,比如 Vue:
<div id="example"> {{ message.split('').reverse().join('') }} </div>
Vue 和 Laravel 一样使用 {{ }},那么需要使用 @{{ }} 或 @verbatim 指令来正确输出 Vue 代码
两种方式
@ 前缀
, 可以使用 @ 符号通知 Blade 渲染引擎某个表达式应保持不变。示例如下:
<h1>Laravel</h1> Hello, @{{ name }}.
在这个例子中, @ 符号将被 Blade 删除;在 Blade 引擎中 {{ name }} 表达式将保持不变,取而代之的是 JavaScript 引擎将渲染该表达式。
@verbatim 指令
如果要在大段的模板中 JavaScript 变量,可以将 HTML 包裹在 @verbatim 指令中,这样就不需要为每个 Blade 回显语句添加 @ 符号:
@verbatim <div class="container"> Hello, {{ name }}. </div> @endverbatim
原文:https://learnku.com/laravel/wikis/25665
相关文章
- [Angular] Angular Router Extra Options - Recommended Settings
- [Angular] Introduction to Angular Internationalization (i18n)
- [Angular] ngx-formly (AKA angular-formly for Angular latest version)
- [Angular] Design API for show / hide components based on Auth
- [Angular] Create a simple *ngFor
- [Angular 2] Using a Reducer to Change an Object's Property Inside an Array
- [Angular 2] Controlling how Styles are Shared with View Encapsulation
- [Angular 8 Unit Testing] Angular 8 Unit Testing -- service
- [Angular] Difference between Providers and ViewProviders
- [Angular Directive] Create a Template Storage Service in Angular 2
- [Angular2 Form] Angular 2 Template Driven Form Custom Validator
- Angular 依赖注入机制实现原理的深入介绍
- Angular Universal:Angular 统一平台简介
- Angular Component模板里的元素,运行时如何被生成并插入到DOM tree中
- Angular DefaultDomRenderer2.setProperty - HTML的值是如何从Angular Component flow过来的,以及跨平台支持
- Angular 内容投影 content projection 的一个问题的单步调试
- 修改 Angular Component 构造函数参数被认为是 breaking change
- Angular 里 unknown 和 any 的区别