jsmart的使用（二）
条件渲染例1：例2：
条件渲染
本篇介绍如何在模板里写判断，常见的有以下两种情况。由于body里没有写内容，这里只展示script部分。 首先，还是需要引入jsmart.js，需要依赖jsmart.min.js的去我的资源里自己下，免费的。
<script src="jsmart.min.js" type="text/javascript" charset="utf-8"></script>
例1：
通过条件判断筛选出数组中18岁以上的女生。 语法： {if 条件语句} dom内容 {/if}
<script id="mytmpl" type="text/x-jsmart-tmpl">
{foreach $list as $item}
{if $item.age>18 && $item.sex=='女'}
{$item.name}
{/if}
{/foreach}
</script>
<!-- 引入jsmart -->
<script type="text/javascript">
var arr = [{
name: '张三',
age: 17,
sex: '男'
},
{
name: '李四',
age: 20,
sex: '男'
},
{
name: '王五',
age: 19,
sex: '女'
},
{
name: '赵六',
age: 17,
sex: '女'
},
];
var html = new jSmart(document.getElementById('mytmpl').innerHTML)
var result = html.fetch({
list: arr
})
document.write(result)
</script>
例2：
用不同的文本颜色区分不同的分数段,90分以上红色，60分到90分之间蓝色，60分以下黑色。 语法： {if 条件语句} dom内容 {elseif 条件语句} dom内容 {else} dom内容 {/if}
<script id="mytmpl2" type="text/x-jsmart-tmpl">
{foreach $list as $item}
{if $item.grade >= 90}
<span style="color:red;">{$item.name}</span>
{elseif ($item.grade <= 90) && ($item.grade >= 60)}
<span style="color:blue;">{$item.name}</span>
{else}
<span style="color:black;">{$item.name}</span>
{/if}
{/foreach}
</script>
<!-- 引入jsmart -->
<script type="text/javascript">
var arr2 = [{
name: '张三',
grade: 100
},
{
name: '李四',
grade: 80
},
{
name: '王五',
grade: 50
},
{
name: '赵六',
grade: 0
},
]
var html2 = new jSmart(document.getElementById('mytmpl2').innerHTML)
var result2 = html2.fetch({
list: arr2
})
document.write(result2)
</script>
