需求:
- 用户昵称只显示前3位,超过部分添加省略号
- 根据用户信息(js变量)里面的是is_vip判断用户是否是vip用户,据此在页面输出同用户身份相符的信息
- 将后台接口请求回来的用户充值记录罗列显示出来
<div id="result"></div> <script type="text/x-dot-template" id="userInfoTpl"> <p>昵称: {{? {{#userInfo.nick.length}}>3 }} {{#userInfo.nick.substring(0,3)}}... {{??}} {{#userInfo.nick}} {{?}} </p> {{?{{#userInfo.is_vip}}==true}} <p>vip用户</p> {{??}} <p>普通用户</p> {{?}} <p>操作记录:</p> <ul> {{ for(var prop in it){ }} <li>{{=prop}} {{=it[prop]}}</li> {{ } }} </ul> </script> <script type="text/javascript"> // 用户信息 var userInfo={'nick':'张三李四王五','is_vip':true}; // 传入模板数据 var data={'2018-5-1':'充值50', '2018-6-1':'充值150', '2018-7-1':'充值100' }; userInfoTpl=document.getElementById('userInfoTpl').innerHTML, userinfoFn=doT.template(userInfoTpl,undefined,userInfo), userInfoHtml=userinfoFn(data); document.getElementById('result').innerHTML=userInfoHtml; </script>
运行结果:
昵称:张三李...
vip用户
操作记录:
2018-5-1 充值50
2018-6-1 充值150
2018-7-1 充值100
注意看js变量userInfo的传入方式,以及在dot.js模板里面的引用!
0条评论( 网友:0 条,站长:0 条 ) 网友评论{有您的评论更精彩....}