返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JS中的art-template模板如何使用if判断
  • 280
分享到

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

2024-04-02 19:04:59 280人浏览 泡泡鱼
摘要

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

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')%>

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

--结束END--

本文标题: JS中的art-template模板如何使用if判断

本文链接: https://lsjlt.com/news/166811.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JS中的art-template模板如何使用if判断
    目录JS art-template模板使用if判断模板引擎art-template的基本使用一、输出数据二、if判断语句三、for循环语句四、子模板JS art-template模板...
    99+
    2024-04-02
  • JS中art-template模板使用过滤器问题
    目录art-template模板使用过滤器举个栗子效果图art-template过滤器(单值,多值)art-template过滤器art-template模板使用过滤器 html有个...
    99+
    2024-04-02
  • 如何让js中的if判断如丝般顺滑详解
    目录前言代码实现思路一思路二总结参考文档前言 项目中的一个小需求点,点击按钮,验证几十个条件框,判断所有条件框是否填写(选择)过数据(至少有一个条件判断为真)再执行对应操作 判断的...
    99+
    2024-04-02
  • 微信小程序如何使用template模板
    这篇文章给大家分享的是有关微信小程序如何使用template模板的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。微信小程序 template模板详解及实例首先看一些官方的一些介绍。...
    99+
    2024-04-02
  • c语言中如何用if判断字符
    在C语言中,可以使用以下方式使用if语句来判断字符:c#include int main() {char c;printf("请输入...
    99+
    2023-10-20
    c语言
  • JS if else语句(条件判断语句)的详细使用
    目录前言if语句if else 语句if else if else 语句总结前言 条件判断语句是程序开发过程中一种经常使用的语句形式,和大部分编程语言相同,JavaScript&nb...
    99+
    2024-04-02
  • php中的if判断语句怎么使用
    今天小编给大家分享一下php中的if判断语句怎么使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。一、基本的if语句基本的i...
    99+
    2023-07-05
  • 如何使用JS判断是否为IE6
    这篇文章主要介绍如何使用JS判断是否为IE6,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!常用的 JavaScript 检测浏览器为 IE 是哪个版本的代码,包括是否是最人极端厌恶的 ie6 识别与检测。代码如下:v...
    99+
    2023-06-08
  • Mybatis的mapper.xml中if标签test判断怎么使用
    本文小编为大家详细介绍“Mybatis的mapper.xml中if标签test判断怎么使用”,内容详细,步骤清晰,细节处理妥当,希望这篇“Mybatis的mapper.xml中if标签test判断怎么使用”文章能帮助大家解决疑惑,下面跟着小...
    99+
    2023-07-01
  • java中如何使用if语句判断字符串是否相等
    首先分析使用 ==(注意:Java中 = 是赋值运算符,== 是比较是否相等) 和 equals()方法 来比较两个字符串相等的区别:==比较的是两个字符串的地址是否为相等(同一个地址),equals()方法比较的是两个字符串对象的内容是否...
    99+
    2016-06-24
    java if语句 判断 字符串 相等
  • java中如何使用if语句判断字符串是否为空或null
    首先,区分空串和null串 空串""是长度为0的字符串,它有自己的串长度(0)和内容(空),判断一个字符串为空的方法:if (str.length() == 0);或if (str.equals(""));在线java学习视频教程推荐:ja...
    99+
    2018-10-22
    java if 判断 字符串 null
  • C++ 函数模板中的类模板是如何使用的?
    C++ 函数模板中的类模板 C++ 函数模板可以感知类模板,并利用它们作为参数类型。这允许您创建通用函数,适用于各种数据类型和结构。 语法template<typename T&...
    99+
    2024-04-15
    c++ 函数模板 代码可读性
  • 怎么在Linux中使用shell条件判断if中的-a到-z
    本篇文章为大家展示了怎么在Linux中使用shell条件判断if中的-a到-z,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。[ -a FILE ] 如果 FILE 存在则为真。[ -b FILE ]...
    99+
    2023-06-09
  • JS如何使用正则表达式判断有效数
    这篇文章将为大家详细讲解有关JS如何使用正则表达式判断有效数,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。<script type="text/...
    99+
    2024-04-02
  • SpringBoot中如何使用Thymeleaf模板
    本文小编为大家详细介绍“SpringBoot中如何使用Thymeleaf模板”,内容详细,步骤清晰,细节处理妥当,希望这篇“SpringBoot中如何使用Thymeleaf模板”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习...
    99+
    2023-06-30
  • 如何在Golang中使用模板
    Golang使用模板的步骤:1、用go get命令安装模板引擎;2、创建一个包含占位符的文本文件;3、使用Parse()方法解析模板;4、使用Execute()方法渲染模板;5、模板变量的解析;6、如果模板需要包含子模板,可以进行模板嵌套;...
    99+
    2023-12-12
    Golang
  • C++的模板如何使用
    这篇文章主要介绍“C++的模板如何使用”,在日常操作中,相信很多人在C++的模板如何使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”C++的模板如何使用”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!一....
    99+
    2023-07-02
  • 如何使用js判断手机是否安装某个app
    这篇文章主要为大家展示了“如何使用js判断手机是否安装某个app”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用js判断手机是否安装某个app”这篇文章吧...
    99+
    2024-04-02
  • PHP中如何使用模板方法模式?
    模板方法模式定义了算法的骨架,具体步骤由子类实现,使子类可自定义具体步骤而无需改变整体结构。此模式用于:1. 定义算法的骨架。2. 将算法的具体行为延迟到子类。3. 允许子类自定义算法的...
    99+
    2024-05-21
    php 模板方法
  • C++中如何使用链栈模板
    本篇文章给大家分享的是有关C++中如何使用链栈模板,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。C++链栈模板声明template <class T&...
    99+
    2023-06-17
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作