浅谈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
相关文章
这篇文章主要给大家介绍了关于ios中视频的最后一桢问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-05-05
这篇文章主要介绍了Javascript原型链的原理,结合实例形式深入分析了JavaScript原型链的原理与使用技巧,需要的朋友可以参考下2016-01-01
这篇文章主要为大家详细介绍了JavaScript实现下拉列表选择框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
运用HTML、CSS以及Javascript相关知识，编写多窗口多菜单的内容联动，具体思路及代码如下，感兴趣的朋友可以参考下哈，希望大家有所帮助2013-05-05
这篇文章主要为大家介绍了前端进阶之IntersectionObserver示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
Js数组的操作push,pop,shift,unshift等方法详细介绍
js中针对数组操作的方法还是比较多的，今天突然想到来总结一下，也算是温故而知新吧。不过不会针对每个方法进行讲解，我只是选择其中的一些来讲,感兴趣的朋友可以研究一下2012-12-12
element必填校验输入空格问题修改正则表达式、请求拦截器实现所有输入框去除首尾空格(推荐)
这篇文章主要介绍了element必填校验输入空格问题修改正则表达式、请求拦截器实现所有输入框去除首尾空格,本文通过图文实例代码相结合给大家讲解的非常详细,感兴趣的朋友跟随小编一起看看吧2024-02-02
本文主要介绍了JavaScript 对象合并的几种方法小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章主要介绍了关于ES6之"let"能替代"var"的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。2017-06-06
本文主要介绍JavaScript 继承的知识，这里整理了详细的资料及简单示例代码，帮助大家学习参考，有兴趣的小伙伴可以参考下2016-09-09
最新评论