模板

模板语法很简单,和普通的模板引擎类似,借用于同事所写的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>

results matching ""

    No results matching ""