Blade基础语法及include的使用

8635次阅读 162人点赞 作者: WuBin 发布时间: 2021-06-30 15:43:36
扫码到手机查看

模板中输出PHP变量

比如在app/Http/StudentController.php控制器的方法中,定义两个变量,并传入视图:

 public function section1()
{
        $name = 'wubin';
        $arr = ['wubin', 'work'];
        return view('student.section1', [
            'name' => $name,
            'arr' => $arr
        ]);
}

父视图模板resources/views/layouts.blade.php中:

<div class="content">
        @yield('content', '主要内容区')
</div>

子视图模板resources/views/student/section1.blade.php:

@section('content')
    content
    <p>{{ $name }}</p>
     //  后续测试代码都会写在此处 
@stop

使用{{ $变量 }} 输出php中的变量。

模板中调用php代码

<p>{{ time() }}</p>
<p>{{ date('Y-m-d H:i:s', time()) }}</p>
<p>{{  in_array($name, $arr) ? 'true' : 'false' }}</p>
<p>{{ var_dump($arr) }} </p>
<p> {{  isset($name) ? $name : 'default' }} </p>
<p> {{  $dd or '模板中isset短语法有输出$name没有输出这里的值' }} </p>

直接在花括号中使用php方法即可。输出结果依次如下:

wubin
1625038271
2021-06-30 07:31:11
true
array(2) { [0]=> string(5) "wubin" [1]=> string(4) "work" }
wubin
模板中isset短语法有输出$name没有输出这里的值

特别注意:通常我们判断变量是否定义使用isset()方法,在模板语法中,可以使用短语法替代:

{{  isset($name) ? $name : '$name不存在时的默认值' }} 
等价于
{{ $name or  '$name不存在时的默认值' }} 

原样输出{{}}中的代码

只需要在花括号外加@即可:

<p>@{{ $name }}</p>
在页面中仅仅会输出 : {{ $name }} 
不会对$name进行编译

模板中的注释

在模板中可以使用两种注释:

  • HTML注释
 <!--  html中的注释,当模板编译后,可以在浏览器中看到 -->
  • blade模板注释
 {{--  模板中的注释,仅仅在模板文件中可见,编译后不可见  --}}

注意:在blade的注释中,不要使用@extends()等关键词,在编译时会报错

{{--  @extends是..  --}}  错误
{{--  @ extends是..  --}}  可以
{{--  @-extends是..  --}}  可以

include引入子视图

比如,在resources/views/student/下新建一个公用的视图文件common1.blade.php:

<p>我是include {{ $mes or '没有传递值'  }}</p>

那么在其他的模板中该如何调用呢?很简单:

 // 仅仅引入视图
@include('student/common1') 
// 向视图变量传递值
@include('student/common1', ['mes' => '传递的值'])
点赞 支持一下 觉得不错?客官您就稍微鼓励一下吧!
关键词:blade,include
推荐阅读
  • uniapp实现被浏览器唤起的功能

    当用户打开h5链接时候,点击打开app若用户在已经安装过app的情况下直接打开app,若未安装过跳到应用市场下载安装这个功能在实现上主要分为两种场景,从普通浏览器唤醒以及从微信唤醒。

    9119次阅读 589人点赞 发布时间: 2022-12-14 16:34:53 立即查看
  • Vue

    盘点Vue2和Vue3的10种组件通信方式

    Vue中组件通信方式有很多,其中Vue2和Vue3实现起来也会有很多差异;本文将通过选项式API组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式。

    3884次阅读 289人点赞 发布时间: 2022-08-19 09:40:16 立即查看
  • JS

    几个高级前端常用的API

    推荐4个前端开发中常用的高端API,分别是MutationObserver、IntersectionObserver、getComputedstyle、getBoundingClientRect、requ...

    14139次阅读 919人点赞 发布时间: 2021-11-11 09:39:54 立即查看
  • PHP

    【正则】一些常用的正则表达式总结

    在日常开发中,正则表达式是非常有用的,正则表达式在每个语言中都是可以使用的,他就跟JSON一样,是通用的。了解一些常用的正则表达式,能大大提高你的工作效率。

    12947次阅读 445人点赞 发布时间: 2021-10-09 15:58:58 立即查看
  • 【中文】免费可商用字体下载与考证

    65款免费、可商用、无任何限制中文字体打包下载,这些字体都是经过长期验证,经得住市场考验的,让您规避被无良厂商起诉的风险。

    11539次阅读 926人点赞 发布时间: 2021-07-05 15:28:45 立即查看
  • Vue

    Vue3开发一个v-loading的自定义指令

    在vue3中实现一个自定义的指令,有助于我们简化开发,简化复用,通过一个指令的调用即可实现一些可高度复用的交互。

    15646次阅读 1248人点赞 发布时间: 2021-07-02 15:58:35 立即查看
  • JS

    关于手机上滚动穿透问题的解决

    当页面出现浮层的时候,滑动浮层的内容,正常情况下预期应该是浮层下边的内容不会滚动;然而事实并非如此。在PC上使用css即可解决,但是在手机端,情况就变的比较复杂,就需要禁止触摸事件才可以。

    14843次阅读 1209人点赞 发布时间: 2021-05-31 09:25:50 立即查看
  • Vue

    Vue+html2canvas截图空白的问题

    在使用vue做信网单页专题时,有海报生成的功能,这里推荐2个插件:一个是html2canvas,构造好DOM然后转canvas进行截图;另外使用vue-canvas-poster(这个截止到2021年3月...

    29040次阅读 2281人点赞 发布时间: 2021-03-02 09:04:51 立即查看
  • Vue

    vue-router4过度动画无效解决方案

    在初次使用vue3+vue-router4时候,先后遇到了过度动画transition进入和退出分别无效的情况,搜遍百度没没找到合适解决方法,包括vue-route4有一些API都进行了变化,以前的一些操...

    25064次阅读 1931人点赞 发布时间: 2021-02-23 13:37:20 立即查看
交流 收藏 目录