我的编程空间,编程开发者的网络收藏夹
学习永远不晚

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

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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

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 class="lazy" data-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')%>

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

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

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

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

java中如何使用if语句判断字符串是否相等

首先分析使用 ==(注意:Java中 = 是赋值运算符,== 是比较是否相等) 和 equals()方法 来比较两个字符串相等的区别:==比较的是两个字符串的地址是否为相等(同一个地址),equals()方法比较的是两个字符串对象的内容是否相同(当然,若两个字
java中如何使用if语句判断字符串是否相等
2016-06-24

C++ 函数模板中的类模板是如何使用的?

C++ 函数模板中的类模板C++ 函数模板可以感知类模板,并利用它们作为参数类型。这允许您创建通用函数,适用于各种数据类型和结构。语法templatevoid func(const T& arg1, const
C++ 函数模板中的类模板是如何使用的?
2024-04-15

java中如何使用if语句判断字符串是否为空或null

首先,区分空串和null串1、 空串""是长度为0的字符串,它有自己的串长度(0)和内容(空),判断一个字符串为空的方法:if (str.length() == 0);或if (str.equals(""));在线java学习视频教程推荐:java视频教程2、
java中如何使用if语句判断字符串是否为空或null
2018-10-22

js中如何使用indexOf() 方法判断字符串包含某个字符

这篇文章主要介绍了js中如何使用indexOf() 方法判断字符串包含某个字符,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。JavaScript是什么JavaScript是一
2023-06-14

如何使用C#中的File.Exists函数判断文件是否存在

如何使用C#中的File.Exists函数判断文件是否存在在C#的文件操作中,判断文件是否存在是一项基本的功能需求。File.Exists函数是C#中的一个用于判断文件是否存在的方法。本文将介绍如何使用C#中的File.Exists函数来判
如何使用C#中的File.Exists函数判断文件是否存在
2023-11-18

如何用JS判断数组中是否存在某个值或者某个对象的值

数组是我们编程中经常使用的的数据结构之一,在处理数组时,我们经常需要在数组中查找特定的值,下面这篇文章主要给大家介绍了关于如何用JS判断数组中是否存在某个值或者某个对象的值的相关资料,需要的朋友可以参考下
2023-01-17

PHP8中如何使用Match表达式简化复杂的条件判断?

PHP8中引入了一个新的特性 - Match表达式,它能够简化复杂的条件判断。Match表达式可以通过一种更简洁明了的方式,实现对多个条件的判断和执行。在本文中,我们将介绍如何使用Match表达式来简化复杂的条件判断,并给出具体的代码示例。
2023-10-22

PHP8中如何使用Match表达式进行更简洁的条件判断?

PHP8中引入了一种新的条件判断语法——Match表达式(也称为模式匹配)。在之前的版本中,我们通常使用多个if-else语句来进行条件判断,而Match表达式的出现使得这一过程更加简洁和易读。本文将介绍PHP8中如何使用Match表达式,
2023-10-22

如何使用 AWS SDK 更改 EC2 启动模板中的实例类型?

问题内容我希望更改启动模板中的某些内容,例如实例类型。这意味着在这样做的同时创建一个新版本。我已经浏览了 Go 和 Python 的 SDK 文档。似乎都没有让我实现相同目标的参数。我指的是这些:Go 的函数,Python的函数
如何使用 AWS SDK 更改 EC2 启动模板中的实例类型?
2024-02-06

MyBatis中动态sql实现传递多个参数并使用if进行参数的判断和实现like模糊搜索以及foreach实现in集合

场景在mapper接口层方法参数有id的数组和姓名的模糊搜索和类型的三个参数。现在需要将这三个参数传递在动态sql的xml中接受并进行判断不为空。然后查询数据库中记录在第一个参数id数组中的并且姓名是模糊搜索的并且类型是直接相等于的。注:博客: https:/
MyBatis中动态sql实现传递多个参数并使用if进行参数的判断和实现like模糊搜索以及foreach实现in集合
2020-04-27

如何使用vue监听页面中某个div的滚动事件并判断滚动位置

这篇文章主要介绍如何使用vue监听页面中某个div的滚动事件并判断滚动位置,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 在开发中常常会遇到这样一个vue页面,页面分为左右两部分,左边是目录树,右边是一个类名为xq
2023-06-29

编程热搜

目录