浅谈laytpl 模板空值显示null的解决方法及简单的js表达式

 更新时间:2019年09月19日 09:23:12   作者:神奇小白  
今天小编就为大家分享一篇浅谈laytpl 模板空值显示null的解决方法及简单的js表达式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

laytpl 模板语法

{{ d.field }} 输出一个普通字段,不转义html 官方的说明 但d.field 为空时会显示null

laytpl 模板 空值显示null的解决方法

{{d.giftName}} 模板中当giftName为空是 页面上会显示 null 字符串

1可以在模板中直接使用三目表达式来判断字符串是否为空。

如下:

{{!d.giftName?" ":d.giftName}}

2还有一种方法,用到一个 || 运算符

{{d.giftName||" "}} 当d.giftName为空时会显示为空字符串

{{d.giftName||"没有赠品"}} 当d.giftName为空时会显示为 没有赠品 双引号或单引号包裹字符串都可以,但不能没有

{{d.giftName|| }} 没有引号直接报错 Laytpl Error:SyntaxError: Unexpected token )

还有一种例外可以不要引号

{{d.giftName|| null }} 和 {{d.giftName}} 没有啥区别

{{# JavaScript表达式 }}

JS 语句。一般用于逻辑处理。用分隔符加 # 号开头。注意:如果你是想输出一个函数,正确的写法是:{{ fn() }},而不是:{{# fn() }}

试试 laytpl 模板的 if else 语法

这是官网上的例子

{{# if(true){ }}
 开始日期:{{ fn() }}
{{# } else { }}
 已截止
{{# } }} 

乍一看有点懵,格式化一下

{{#      if(true){              }}
               开始日期
{{#        } else {             }} 
               已截止
{{#        }                    }}

这下就一目了然了

https://www.layui.com/doc/modules/laytpl.html

相关文章

  • JS访问SWF的函数用法实例

    JS访问SWF的函数用法实例

    这篇文章主要介绍了JS访问SWF的函数用法,实例分析了javascript访问swf文件的方法及易错点的处理技巧,需要的朋友可以参考下
    2015-07-07
  • JS实现图片瀑布流效果

    JS实现图片瀑布流效果

    这篇文章主要为大家详细介绍了JS实现图片瀑布流,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • JavaScript中强大的操作符使用详解

    JavaScript中强大的操作符使用详解

    JavaScript 为我们提供了很多操作符,用于操作表达式。下面就来盘点一下 JavaScript 中那些强大的操作符,感兴趣的小伙伴可以了解一下
    2022-09-09
  • js实现轮播图的两种方式(构造函数、面向对象)

    js实现轮播图的两种方式(构造函数、面向对象)

    这篇文章主要为大家详细介绍了js实现轮播图的两种方式,一是构造函数、另一种是面向对象方式方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • IE8 浏览器Cookie的处理

    IE8 浏览器Cookie的处理

    最近在修改重写自己的简历程序,其中要使用皮肤切换和lightbox效果,在开发的工作中IE8,给我带来点麻烦。
    2009-01-01
  • Bootstrap选项卡与Masonry插件的完美结合

    Bootstrap选项卡与Masonry插件的完美结合

    这篇文章主要介绍了Bootstrap选项卡与Masonry插件的完美结合的相关资料,需要的朋友可以参考下
    2016-07-07
  • javascript实现简单滚动窗口

    javascript实现简单滚动窗口

    这篇文章主要为大家详细介绍了javascript实现简单滚动窗口,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • JS面向对象编程基础篇(一) 对象和构造函数实例详解

    JS面向对象编程基础篇(一) 对象和构造函数实例详解

    这篇文章主要介绍了JS面向对象编程对象和构造函数,结合实例形式详细分析了JS面向对象编程对象和构造函数具体概念、原理、使用方法及操作注意事项,需要的朋友可以参考下
    2020-03-03
  • javascript实现移动端上的触屏拖拽功能

    javascript实现移动端上的触屏拖拽功能

    这篇文章主要为大家详细介绍了基于javascript实现移动端上的触屏拖拽功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • JavaScript变量类型以及变量之间的转换你了解吗

    JavaScript变量类型以及变量之间的转换你了解吗

    这篇文章主要为大家详细介绍了JavaScript变量类型以及变量之间的转换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02

最新评论