您现在的位置是:网站首页> 编程资料编程资料
JS中的art-template模板如何使用if判断_javascript技巧_
2023-05-24
410人已围观
简介 JS中的art-template模板如何使用if判断_javascript技巧_
JS art-template模板使用if判断
JS代码:
// json数据 var json=[ { "id": 1, "good_sign": 2, "good_img": "http://dummyimage.com/460x440/ee79f2/79f2cb.png&text=商品\n" }, { "id": 2, "good_sign": 1, "good_img": "http://dummyimage.com/460x440/f2a779/8479f2.png&text=商品\n" }, { "id": 3, "good_sign": 0, "good_img": "http://dummyimage.com/460x440/91f279/f279b4.png&text=商品\n" }, { "id": 4, "good_sign": 1, "good_img": "http://dummyimage.com/460x440/79d7f2/f2e979.png&text=商品\n" } ] // 渲染json $("#container").html(template("indexmain",json));HTML代码:
效果图:

模板引擎art-template的基本使用
art-template的基本使用(判断语句、循环、子模板的使用) //数据来源 const template = require('art-template'); const path = require('path'); const views = path.join(__dirname, 'views', '02.art'); const html = template(views, { name: '张三', age: 17, content: '我是标题
' }) console.log(html);一、输出数据
1.标准语法
{{ name }}
//使用大括号的方式输出数据{{1+1}}
//在括号内可以实现基本运算{{1+1==2?'相等':'不相等'}}
//在括号内可以实现三目运算 {{@ content }}//如果要引入包含html标签的数据 标准语法必须在中括号前加上@
2.原始语法
<%=name%>
<%=1+1==2?'相等':'不相等'%>
<%- content%>
//要引入包含html标签的数据,就要把=号换成-
二、if判断语句
1.标准语法
{{if age>18}} 年龄大于18 {{else if age<15}}年龄小于15 {{else}}年龄不符合要求 {{/if}}2.原始语法
//其实就是先用<%%>把整个判断语句包含起来 然后if(){%><%}else if(){%><%}else{%><%} <% if(age>18){%> 年龄大于18 <%} else if(age<15){%>年龄小于15<%} else{%>年龄不符合要求<%} %>三、for循环语句
//数据来源 const template = require('art-template'); const path = require('path'); const views = path.join(__dirname, 'views', '03.art'); const html = template(views, { users: [{ name: '张三', age: 20, sex: '男' }, { name: '李四', age: 30, sex: '男' }, { name: '玛丽', age: 15, sex: '女' }] }); console.log(html);1.标准语法
- {{each users}}//users 就是被循环的数据
- {{$value.name}} //value就是循环得出的数据
- {{$value.age}}
- {{$value.sex}} {{/each}}
2.原始语法
- //跟if语句的原始语法一样 其实也是把整个for循环语句用<%%>包含起来 然后for(){%><%} 里面js的for怎么写 这里还是怎么写 <% for(var i=0;i
- <%=users[i].name%>
- <%=users[i].age%>
- <%=users[i].sex%> <%} %>
四、子模板
1.标准语法
{{include './common/header.art'}} {{msg}} {{include './common/footer.art'}}2.原始语法
<% include ('./common/header.art')%><%=msg%><% include ('./common/footer.art')%>以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
相关内容
- Vue2为何能通过this访问到data与methods的属性_vue.js_
- elementUI+Springboot实现导出excel功能的全过程_vue.js_
- vue-cli3启动服务如何自动打开浏览器配置_vue.js_
- Nodejs新特性async和await的使用详解_node.js_
- 关于element-ui select 下拉框位置错乱问题解决_vue.js_
- js词法作用域与this实例详解_javascript技巧_
- vue的el-select绑定的值无法选中el-option问题及解决_vue.js_
- vue中的select绑定多个值_vue.js_
- vue框架通用化解决个性化文字换行问题实例详解_JavaScript_
- vue select组件绑定的值为数字类型遇到的问题_vue.js_
