JS中的art-template模板如何使用if判断

目录
  • JS art-template模板使用if判断
  • 模板引擎art-template的基本使用
    • 一、输出数据
    • 二、if判断语句
    • 三、for循环语句
    • 四、子模板

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代码:

	<div id="container"></div>

	<script type="text/html" id="indexmain">
		<!-- 商品列表 -->
		<ul>
			{{each list item}}
			<li>
				<a href="javascript:;" rel="external nofollow" >
					{{if item.good_sign==1}}
					<div class="ico-comm i-mark">
						 <span>新品</span>
					</div>
					{{else if item.good_sign==2}}
					<div class="ico-comm i-mark">
						 <span>热卖</span>
					</div>
					{{/if}}
					<img src="{{item.good_img}}" alt="商品图">
				</a>
			</li>
			{{/each}}
		</ul>
	</script>

效果图:

模板引擎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: '<h1>我是标题</h1>'
})
console.log(html);

一、输出数据

1.标准语法

 <p>{{ name }}</p> //使用大括号的方式输出数据
 <p>{{1+1}}</p>//在括号内可以实现基本运算
 <p>{{1+1==2?'相等':'不相等'}}</p>//在括号内可以实现三目运算
 {{@ content }}//如果要引入包含html标签的数据 标准语法必须在中括号前加上@

2.原始语法

 <p><%=name%></p>
 <p><%=1+1==2?'相等':'不相等'%></p>
 <p><%- content%></p>//要引入包含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.标准语法

   <ul>
     {{each users}}//users 就是被循环的数据
     <li>{{$value.name}}</li>//value就是循环得出的数据
     <li>{{$value.age}}</li>
     <li>{{$value.sex}}</li>
     {{/each}}
     </ul>

2.原始语法

<ul>
//跟if语句的原始语法一样  其实也是把整个for循环语句用<%%>包含起来   然后for(){%><%}  里面js的for怎么写  这里还是怎么写
        <% for(var i=0;i<users.length;i++){%>
        <li><%=users[i].name%></li>
        <li><%=users[i].age%></li>
        <li><%=users[i].sex%></li>
        <%} %>
     </ul>

四、子模板

1.标准语法

{{include './common/header.art'}}
<div>{{msg}}</div>
{{include './common/footer.art'}}

2.原始语法

<% include ('./common/header.art')%>
<div><%=msg%></div>
<% include ('./common/footer.art')%>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 详解js模板引擎art template数组渲染的方法

    JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,模板引擎种类也是五花八门,我就说几个安全性高.错误处理调试优,执行速度快的有artTemplate(腾讯 14k).juicer(国外 12k)这俩个,doT除了错误处理调试差以外其他的都和这两个一样,他有一个优点是小(4k),扯远啦. art-template 是一个简约.超快的模板引擎. 什么是art-template art-template 是一个简约.超快的模板引擎.它采用作用域预声明的技术来优化模板

  • javascript if条件判断方法小结

    条件语句用于基于不同的条件来执行不同的动作. 条件语句 通常在写代码时,您总是需要为不同的决定来执行不同的动作.您可以在代码中使用条件语句来完成该任务. 在 JavaScript 中,我们可使用以下条件语句: •if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码•if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码•if...else if....else 语句 - 使用该语句来选择多个代码块之一来执行•switch 语句 - 使用

  • 详解template标签用法(含vue中的用法总结)

    一.html5中的template标签 html中的template标签中的内容在页面中不会显示.但是在后台查看页面DOM结构存在template标签.这是因为template标签天生不可见,它设置了display:none;属性. <!--当前页面只显示"我是自定义表现abc"这个内容,不显示"我是template",这是因为template标签天生不可见--> <template><div>我是template</div

  • js中el表达式的使用和非空判断方法

    注意,这里想说的不是jsp里面嵌套的el表达式的使用,而是在js中使用. 场景: 页面跳转后,使用spring mvc向前端页面传过来一个json对象,要在js中获取后,做处理. 返回的json对象: {"nodes":[{"contactmobile":"15922208502","orderno":"XNH31918062989476864"},{"id":"12198&q

  • js中数组结合字符串实现查找(屏蔽广告判断url等)

    1.广告屏蔽 有时候我们的广告页面都是统一的用js控制的,有些页面不想显示部分广告,那么我们只需要文章的id即可,纯字符串查找简单有效,我们也在用 var ad_softlist = ',,133015,155868,146429,'; if("undefined" != typeof softid){ //判断文章id是否存在,不存在就不执行,一般页面中会定义好var softid=45465; if(softid!=null && ad_softlist.index

  • vue.js template模板的使用(仿饿了么布局)

    使用template实现如下页面(仿饿了么布局) 如上图.使用了4个组件,分别是header.vue,goods.vue,ratings.vue,seller.vue header.vue代码如下 <template> <div class="header"> 我是header头部 </div> </template> <script type="text/ecmascript-6"> export def

  • vue中template模板编译的过程全面剖析

    目录 简述过程 vue的渲染过程 parse parse过程总结 generate生成render函数 简述过程 vue template模板编译的过程经过parse()生成ast(抽象语法树),optimize对静态节点优化,generate()生成render字符串 之后调用new Watcher()函数,用来监听数据的变化,render 函数就是数据监听的回调所调用的,其结果便是重新生成 vnode. 当这个 render 函数字符串在第一次 mount.或者绑定的数据更新的时候,都会被调

  • Vue.js中的图片引用路径的方式

    当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形: 使用一 我们在data里面定义好图片路径 imgUrl:'../assets/logo.png' 然后,在template模板里面 /*错误写法*/ <img src="{{imgUrl}}"> 这样是错误的写法,我们应该用v-bind绑定图片的srcs属性 <img :src="imgUrl"> 或者 <img src="../assets/logo.png

  • vue.js中指令Directives详解

    想必喜欢前端开发的小伙伴们都或多或少接触过MVVM这个概念,说起MVVM,第一时间想到的便是angularjs,knockoutjs等已经被广泛运用的MVVM框架,之前我也没有在这方面有很多了解,最近在做项目的过程中接触了Vue.js,这是一个小巧精致,性能优异的MVVM框架,可以说对初学者是比较容易入门的,该框架的英文文档写得很好,但是中文版访问还不太稳定,翻译也有待改进,所以自己一遍学习,一遍记录自己的思考,与各位共享学习的经验. 第一篇主要是想谈谈vue.js中的Directives即指令

  • Vue.js中组件中的slot实例详解

    Vue组件中的slot slot 可以实现在已经定义的组件中添加内容,组件会接收内容并输出,假如有一个组件person,它的里面包含的是个人信息,如下面这样 <template id="per"> <div> <p>姓名:...</p> <p>年龄:...</p> <p>职业:...</p> </div> </template> 在应用的时候,当然希望这里面可以是灵活

  • 在Node.js中使用HTTP上传文件的方法

    开发环境 我们将使用 Visual Studio Express 2013 for Web 作为开发环境, 不过它还不能被用来做 Node.js 开发.为此我们需要安装 Node.js Tools for Visual Studio.  装好后 Visual Studio Express 2013 for Web 就会转变成一个 Node.js IDE 环境,提供创建这个应用所需要的所有东西..而基于这里提供的指导,我们需要: 下载安装 Node.js  Windows 版,选择适用你系统平台的

  • 微信小程序 template模板详解及实例

    微信小程序 template模板详解及实例 首先看一些官方的一些介绍. 模板:模板功能是通过对template 标签的属性 name="" 去创建不同模板,通过is="name的值"来使用. 通过上面两张图,大概能看出,使用模板可以为大量类似的布局带来便利.下面看一下我自己的一个Demo. 先放出效果图(数据来自聚合数据) 可以看到,除了选项个数的差别之外,其他布局是相同的. 下面的每一道题的模板. <template name="carItem&q

随机推荐