浅谈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 在各个浏览器中执行的耐性
Apr 06 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
js倒计时简单实现方法
Dec 17 Javascript
JavaScript 事件对内存和性能的影响
Jan 22 Javascript
javascript中apply/call和bind的使用
Feb 15 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
Mar 21 Javascript
jQuery+pjax简单示例汇总
Apr 21 jQuery
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 Javascript
微信小程序中button组件的边框设置的实例详解
Sep 27 Javascript
详解javascript appendChild()的完整功能
Aug 18 Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 Javascript
JS如何实现在弹出窗口中加载页面
Dec 03 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
一个PHP模板,主要想体现一下思路
2006/12/25 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
2016/08/19 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
微信小程序之MaterialDesign--input组件详解
2017/02/15 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
如何从零开始手写Koa2框架
2019/03/22 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
layui 表单标签的校验方法
2019/09/04 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
javascript 设计模式之组合模式原理与应用详解
2020/04/08 Javascript
vue设置全局访问接口API地址操作
2020/08/14 Javascript
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
Django框架 信号调度原理解析
2019/09/04 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
Python unittest框架操作实例解析
2020/04/13 Python
UGG雪地靴德国官网:UGG德国
2016/11/19 全球购物
施华洛世奇日本官网:SWAROVSKI日本
2018/05/04 全球购物
销售部主管岗位职责
2013/12/18 职场文书
关于幼儿的自我评价
2013/12/18 职场文书
项目投资意向书范本
2015/05/09 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL
Python matplotlib多个子图绘制整合
2022/04/13 Python