几个常用的ejs语法
2018-01-06 本文已影响0人
王伯卿
分别接触了jade和ejs,准备从这两个中间选择一个.
jade的语法虽然简便,但是总感觉和之前学的知识没有关系.
最后选择了ejs,原因是因为就是比较好学,而且和html兼容,但是感觉满屏都是%<的,脑袋有点大,不过两个都是挺好用的.
现在记录下刚学的几个语法,平常比较常用.
1.转义输出
<%= 变量名 %>
这个是转义输出,可以把变量名替换成自己需要的东西.
我们可以这么使用.
// js文件
ejs.renderFile('./views/test.ejs',{name:'wzz'},function(err,data){
if(err){
console.log(err);
}else{
console.log(data);
}
});
<!-- ejs文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<%=name%>
</body>
</html>
最后我们可以发现name变量,在控制台被替换成了wzz.
2.js代码
<% Javascript代码 %>
这里面可以写javascript的代码.我们可以这么使用
// js文件
ejs.renderFile('./views/test.ejs',{json:{arr:[
{user:'a',pass:'1'},
{user:'b',pass:'2'},
{user:'c',pass:'3'},
{user:'d',pass:'4'}
]}},function(err,data){
if(err){
console.log(err);
}else{
console.log(data);
}
});
<!-- ejs文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<%for(var i=0;i<json.arr.length;i++){%>
<div>user:<%=json.arr[i].user%> pass:<%=json.arr[i].pass%><div>
<%}%>
</body>
</html>
然后我们发现控制台循环输出了div和里面的内容
<div>user:a pass:1<div>
<div>user:b pass:2<div>
<div>user:c pass:3<div>
<div>user:d pass:4<div>
3.不转义输出
<%- 变量名%>
不转义输出可以把定义的字符串不转义的输出.
我们可以这么用,这边我们省略了第二个不使用的json数据
// js文件
ejs.renderFile('./views/test.ejs',function(err,data){
if(err){
console.log(err);
}else{
console.log(data);
}
});
<!-- ejs文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<% var str='<div><div>'; %>
<%-str %>
<%=str %>
</body>
</html>
输出结果如下
<div><div>
<div><div>
4.使用include引入外部的文件
<% include 文件的地址 %>
我们先新建一个txt文件,随便在里面填上一点内容供测试使用.
js文件和上面的一样,所以省略,下面是ejs文件
<!-- ejs文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<% include ../content.txt %>
</body>
</html>
我们发现控制台正确的输出了我们想要的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
hello world
</body>
</html>
这就是常用的4个小方法.
对了如果不知道如何写绝对路径和相对路径,请参考下面这篇文章.
绝对路径和相对路径的写法
