fsLayui 在html页面如何做逻辑if else 判断之laytpl语法

{
  "title": "Layui常用模块"
  ,"list": [
    {
      "modname": "弹层"
      ,"alias": "layer"
      ,"site": "layer.layui.com"
    }
    ,{
      "modname": "表单"
      ,"alias": "form"
    }
    ,{
      "modname": "分页"
      ,"alias": "laypage"
    }
    ,{
      "modname": "日期"
      ,"alias": "laydate"
    }
    ,{
      "modname": "上传"
      ,"alias": "upload"
    }
  ]
}
        
<h3>{{ d.title }}</h3>
<ul>
{{#  layui.each(d.list, function(index, item){ }}
  <li>
    <span>{{ item.modname }}</span>
    <span>{{ item.alias }}:</span>
    <span>{{ item.site || '' }}</span>
  </li>
{{#  }); }}
 
{{#  if(d.list.length === 0){ }}
  无数据
{{#  }}} 
 
</ul>
        
<h3>{{ d.title }}</h3>
<ul>
{{#  layui.each(d.list, function(index, item){ }}
  <li>
    <span>{{ item.modname }}</span>
    <span>{{ item.alias }}:</span>
    <span>{{ item.site || '' }}</span>
  </li>
{{#  }); }}
 
{{#  if(d.list.length === 0){ }}
  无数据
{{#  }else{ }} 
  ALL IS HERE
 {{#  } }} 
</ul>
        

这样就可以实现我们以前常用的页面上的逻辑判断了,如果不习惯{{# }},这种组合,也可以页面转换为我们常用的<%%>

laytpl.config({
  open: '<%',
  close: '%>'
});
 
//分割符将必须采用上述定义的
laytpl([
  '<%# var type = "公"; %>' //JS 表达式
  ,'<% d.name %>是一位<% type %>猿。'
].join('')).render({
  name: '贤心'
}, function(string){
  console.log(string); //贤心是一位公猿
});  

laytpl 应用在 layui 的很多模块中,如:layim、table 等。尽管传统意义的前端模板引擎已经变得不再流行,但 laytpl 仍然可以发挥一定作用

猜你喜欢

转载自blog.csdn.net/niuzaiwenjie/article/details/81676461
今日推荐