jade讀取數據

test.js

const jade=require('jade');console.log(jade.renderFile('./views/7.jade', {pretty: true, a: 12, b: 5}));

7.jade

htmlheadbodydiv 我的名字：#{a+b}

---

jade行內樣式為對象，非行內是數組

test.js

const jade = require('jade')console.log(jade.renderFile('./views/8.jade', {pretty: true,json: { width: '200px', height: '200px', background: 'red' },arr: ['aaa', 'left-wrap'],spec: ['name1', 'name2', 'name3'],}) ) 8.jade htmlheadbodydiv(style=json)div(class=arr)div(class=arr class="active")div(class=arr)div(class=arr)div(class=spec)

jade綁定值的兩種方式

test.js

const jade=require('jade');console.log(jade.renderFile('./views/10.jade', {pretty: true, a: 12, b: 5}));

10.jade

htmlheadbodyspan #{a}span=a

jade數據遍歷

test.js

const jade = require('jade')console.log(jade.renderFile('./views/11.jade', {pretty: true,arr: ['aaa', 'sfasdf', '3423', 'asdfasdf'],className: ['item'],}) )

test.jade

htmlheadbody-for(var i=0;i<arr.length;i++)div(class=className)=arr[i]

jade 渲染dom，加！進行轉義

test.js

const jade=require('jade');console.log(jade.renderFile('./views/12.jade', {pretty: true,content: "<h2>你好啊</h2><p>對方水電費色弱威爾士地方</p>" }));

12.jade

htmlheadbodydiv!=content

jade if條件判斷

test.js

const jade=require('jade');console.log(jade.renderFile('./views/13.jade', {pretty: true}));

13.jade

htmlheadbody-var a=19;if(a%2==0)div(style={background:'red'}) 偶數elsediv(style={background:'green'}) 奇數

jade switch 操作

test.js

const jade=require('jade');console.log(jade.renderFile('./views/14.jade', {pretty: true}));

14.jade

htmlheadbody-var a=1;case awhen 0div aaawhen 1div bbbwhen 2div cccdefault|不靠譜

總結

以上是生活随笔為你收集整理的Jade数据处理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。