模板
模板语法很简单,和普通的模板引擎类似,借用于同事所写的tmp.js(npm install tmp 可以单独安装此模板引擎)
保存为.na
后缀的文件并在模块中引入
需要加上 data 前缀 会在以后版本中重写模板引擎解决这种问题
输出
输出使用双花括号的形式
//template.na
<div>{{data.name}}</div>
//module
import tmp from 'template.na';
export default {
name:'list',
render:()=>tmp,
data:{
name:'Tom'
}
}
//输出
<div>Tom</div>
条件判断
语法和单纯的js 语法基本一致
{$^if name == 'Tom'}
<div>{{data.name}}</div>
{$$if}
循环语句
借助于 each 关键字
//template.na
<ul>
{$^each data.items as v in index}
<li>{{index+1}}.姓名:{{v.name}}, 年龄:{{v.age}}</li>
{$$each}
</ul>
//module
import tmp from 'template.na';
export default {
name:'list',
render:()=>tmp,
data:{
items:[
{
name:'Tom',
age:'10'
},
{
name:'Lucy',
age:'12'
}
]
}
}
//输出
<ul>
<li>1.姓名:Tom, 年龄:10</li>
<li>2.姓名:Lucy, 年龄:12</li>
</ul>