浅谈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获取指定日期前后的日期代码

    js获取指定日期前后的日期代码

    js获取指定日期前后的日期,在实际应用中还是比较实用的,下面为大家简单介绍下具体的实现过程,有需要的朋友可以参考下
    2013-08-08
  • js实现登录与注册界面

    js实现登录与注册界面

    这篇文章主要为大家详细介绍了js实现登录与注册界面,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • Js遍历键值对形式对象或Map形式的方法

    Js遍历键值对形式对象或Map形式的方法

    下面小编就为大家带来一篇Js遍历键值对形式对象或Map形式的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 使用javascript做在线算法编程

    使用javascript做在线算法编程

    这篇文章主要介绍了使用javascript做在线算法编程的相关知识,需要的朋友可以参考下
    2018-05-05
  • ES6中字符串的使用方法扩展

    ES6中字符串的使用方法扩展

    这篇文章主要给大家介绍了关于ES6中字符串的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用ES6具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • JS基于myFocus库实现各种功能的tab选项卡切换效果

    JS基于myFocus库实现各种功能的tab选项卡切换效果

    这篇文章主要介绍了JS基于myFocus库实现各种功能的tab选项卡切换效果,实例演示了JS实现tab嵌套显示及常用过度效果的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • javascript构造函数以及原型对象的理解

    javascript构造函数以及原型对象的理解

    本文主要介绍了javascript构造函数以及原型对象的理解。分享了有关它们的实例代码,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • javascript 传统事件模型构造的事件监听器实现代码

    javascript 传统事件模型构造的事件监听器实现代码

    最近做东西需要添加大量的事件,而且要对所有事件进行比较细致的控制,于是便试着写了个事件监听器。
    2010-05-05
  • 无阻塞加载脚本分析[全]

    无阻塞加载脚本分析[全]

    script标签的阻塞行为会对页面性能产生负面影响,大多数浏览器在下载或执行脚本的同时,会阻塞下载位于它之后的资源,也会阻塞渲染位于它之后的元素。
    2011-01-01
  • 原生js实现购物车逻辑和功能

    原生js实现购物车逻辑和功能

    这篇文章主要为大家详细介绍了原生js实现购物车逻辑和功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09

最新评论