当前位置：首页 > news >正文

amis模板语法、数据映射与表达式

news 2025/7/4 23:10:29

模板字符串

表达式中获取变量
可以支持在普通文本中，使用数据映射语法：${xxx} 获取数据域中变量的值

 "Hello ${text}"

渲染 html
使用数据映射语法：${xxx} 获取数据域中变量的值，并渲染 HTML

 "<h1>Hello</h1> <span>${text}</span>"

表达式

 "${xxx == 1 ? 'One' : 'Others'}"

官网地址

JavaScript 模板引擎

注意：
在 JavaScript 模板引擎中，我们获取数据域变量的方式是data.xxx，而不是之前的${xxx}，如果你熟悉 JavaScript 的话，这里模板引擎其实是将数据域，当做当前代码的数据作用域进行执行，因此需要使用data.xxx进行取值
要注意使用模板的时候在不同的场景下要使用正确的取值方式。

注意

模板字符串和 Javascript 模板引擎不可以交叉使用

链式取值

可以使用.进行链式取值
eg:

{"type": "page","data": {"name": "rick","company": {"name": "baidu","department": "it"}},"body": {"type": "tpl","tpl": "my name is ${name}, I work for ${company.name}"}
}

效果类似于：

my name is rick, I work for baidu

复杂配置

展开所配置的数据

可以使用"&"，作为数据映射 key，展开所配置的变量，例如：

{"type": "page","body": {"type": "form","data": {"a": "1","b": "2","c": {"e": "3","f": "4","g": "5"}},//复杂配置"api": {"url": "/amis/api/mock2/form/saveForm","method": "post","data": {"name": "${name}","email": "${email}","&": "${c}"}},"body": [{"type": "input-text","name": "name","label": "姓名："},{"name": "email","type": "input-text","label": "邮箱："}]}
}

"&"标识符会将所配置的c变量的value值，展开并拼接在data中。查看网络面板可以看到数据如下：

{"name": "rick","email": "rick@gmail.comn","e": "3","f": "4","g": "5"
}

数组提取值

"data": {"items": {"$table": {"a": "${a}","c": "${c}"}}
}

这个配置的意思是，只提取table数组中的a变量和c变量，组成新的数组，赋值给items变量

namespace

默认取值都是从当前组件上下文数据链中取数据，但是有些数据可能不在这个数据链中，比如有些数据存在全局变量，有的数据存在 localstorage 中。

如：${window:document.title} 意思是从全局变量中取页面的标题。

目前有以下三种 namespace

window 即全局变量
ls 即 localStorage，如果值是 json
对象，可以直接当对象用比如：${ls:xxxxxlocalStrorageKey.xxxx}
ss 即 sessionStorage，同上。
cookie 即 cookies，同上。

过滤器

过滤器是对数据映射的一种增强，它的作用是对获取数据做一些处理，基本用法如下：

${xxx [ |filter1 |filter2...] }

串联使用过滤器

使用单一的过滤器可能无法满足你的所有需求，幸运的是 amis 支持串联使用过滤器，而前一个过滤器的值会作为下一个过滤器的入参，进行下一步处理。语法如下:

${xxx|filter1|filter2|...}

json
用于将数据转换为json格式字符串

基本用法

// 用法
${xxx | json[:tabSize]}
//示例
{"type": "page","data": {"info": {"name": "rick","company": "baidu"}},"body": {"type": "tpl","tpl": "my info is ${info|json}"}
}
// 结果
my info is { "name": "rick", "company": "baidu" }
// 指定缩进数
${xxx|json:4} // 指定缩进为4个空格

toJson
与json相反，用于将json格式的字符串，转换为javascript对象

//用法
${xxx | toJson}
//示例{"type": "page","data": {"info": "{\"name\": \"rick\", \"company\": \"baidu\"}"},"body": {"type": "tpl","tpl": "my info is ${info|toJson}"}
}
//结果
my info is [object Object]

date
日期格式化过滤器，用于把特定时间值按指定格式输出。

// 基本用法
${xxx | date[:format][:inputFormat]}// 例如你想将某一个时间值，以 2020-04-14 这样的格式输出，那么查找 moment 文档可知配置格式应为 YYYY-MM-DD，即：
{"type": "page","data": {"now": 1586865590},"body": {"type": "tpl","tpl": "now is ${now|date:YYYY-MM-DD}"}
}now is 2020-04-14// 如果你的数据值默认不是X格式（即时间戳格式），那么需要配置inputformat参数用于解析当前时间值，例如：
{"type": "page","data": {"now": "2020/4/14 19:59:50"},"body": {"type": "tpl","tpl": "now is ${now|date:LLL:YYYY/MM/DD HH\\:mm\\:ss}"}
}now is 2020年4月14日晚上7点59分

toDate
将日期字符串转成日期对象, 第二个参数为字符串的日期格式类型。

用法：

${xxx | toDate:YYYY-MM-DD}

dateModify
日期修改，将输入的日期对象修改后返回新的日期对象，支持四种操作符。

add 加 n （秒|分钟|小时|天|月|季度|年）。
subtract 减 n （秒|分钟|小时|天|月|季度|年）。
startOf 修改成某个维度的开头。
endOf 修改成某个纬度的结尾。

// 将 xxx 修改成 7 天前，假如值是 10 月 8 号，那么处理完后就是 10 月 1 号。${xxx | dateModify:subtract:-7:day}{"type": "page","body": "上个月第一天是：${_|now|dateModify:subtract:1:month|dateModify:startOf:month|date:YYYY-MM-DD HH\\:mm\\:ss}"
}上个月第一天是：2024-12-01 00:00:00

fromNow

{"type": "page","data": {"oldDate": "2021-10-01"},"body": "${oldDate|fromNow}"
}3 年前

其他注意的详见官方文档

表达式

官方文档

{"type": "page","body": [{"type": "form","wrapWithPanel": false,"data": {"val": 3.5},"body": [{"type": "static","label": "IF(true, 2, 3)","tpl": "${IF(true, 2, 3)}"},{"type": "static","label": "MAX(1, -1, 2, 3, 5, -9)","tpl": "${MAX(1, -1, 2, 3, 5, -9)}"},{"type": "static","label": "ROUND(3.5)","tpl": "${ROUND(3.5)}"},{"type": "static","label": "ROUND(val)","tpl": "${ROUND(val)}"},{"type": "static","label": "AVG(4, 6, 10, 10, 10)","tpl": "${AVG(4, 6, 10, 10, 10)}"},{"type": "static","label": "UPPERMONEY(7682.01)","tpl": "${UPPERMONEY(7682.01)}"},{"type": "static","label": "TIMESTAMP(DATE(2021, 11, 21, 0, 0, 0), 'x')","tpl": "${TIMESTAMP(DATE(2021, 11, 21, 0, 0, 0), 'x')}"},{"type": "static","label": "DATETOSTR(NOW(), 'YYYY-MM-DD')","tpl": "${DATETOSTR(NOW(), 'YYYY-MM-DD')}"}]}]
}IF(true, 2, 3)
2
MAX(1, -1, 2, 3, 5, -9)
5
ROUND(3.5)
3.5
ROUND(val)
3.5
AVG(4, 6, 10, 10, 10)
8
UPPERMONEY(7682.01)
柒仟陆佰捌拾贰元壹分
TIMESTAMP(DATE(2021, 11, 21, 0, 0, 0), 'x')
1640016000000
DATETOSTR(NOW(), 'YYYY-MM-DD')
2025-01-16