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


Posted in Javascript onSeptember 19, 2019

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

Javascript 相关文章推荐
两个比较有用的Javascript工具函数代码
Feb 17 Javascript
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
实现点击列表弹出列表索引的两种方式
Mar 08 Javascript
node+express+jade制作简单网站指南
Nov 26 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
AngularJS利用Controller完成URL跳转
Aug 09 Javascript
vue2.0模拟锚点的实例
Mar 14 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
javascript动态创建对象的属性详解
Nov 07 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
微信小程序进入广告实现代码实例
Sep 19 #Javascript
解决layui数据表格Date日期格式的回显Object的问题
Sep 19 #Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 #Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 #Javascript
vue-froala-wysiwyg 富文本编辑器功能
Sep 19 #Javascript
关于layui toolbar和template的结合使用方法
Sep 19 #Javascript
深入理解javascript prototype的相关知识
Sep 19 #Javascript
You might like
Home Coffee Roasting
2021/03/03 咖啡文化
PHP fopen 读取带中文URL地址的一点见解
2012/09/25 PHP
在smarty中调用php内置函数的方法
2013/02/07 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
ext 代码生成器
2009/08/07 Javascript
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
JS重要知识点小结
2011/11/06 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
2014/08/04 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
2017/08/08 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
js移动端图片压缩上传功能
2020/08/18 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
wxPython实现带颜色的进度条
2019/11/19 Python
浅谈Python 函数式编程
2020/06/20 Python
详解python命令提示符窗口下如何运行python脚本
2020/09/11 Python
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
悬挂训练绳:TRX
2017/12/14 全球购物
会计实习生自我鉴定
2013/12/12 职场文书
党员个人公开承诺书
2014/08/29 职场文书
毕业设计论文评语
2014/12/31 职场文书
实习推荐信格式模板
2015/03/27 职场文书
法律意见书范文
2015/05/20 职场文书
基于Python实现射击小游戏的制作
2022/04/06 Python