laytpl模板空值显示null的解决方法及JS表达式用法

laytpl模板基础语法与空值问题

laytpl模板语法

{{ d.field }}用于输出普通字段，官方说明指出不会转义HTML。但当d.field为空时，页面会直接显示null字符串。

解决laytpl模板中空值显示为null的问题

在模板中，若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表达式与逻辑处理

{{# JavaScript表达式 }}

JS语句通常用于逻辑处理，以分隔符加#号开头。注意：若需输出函数结果，正确写法是{{ fn() }}，而非{{# fn() }}。

尝试使用laytpl模板的if-else语法。

这是官网提供的示例。

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

乍看可能令人困惑，格式化后如下：

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

这样便一目了然。

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