jade操作HTML中的js

如何在jade中解析变量

js部分

// jade  pug
// cnpm install jade 
//1.解析字符串
// 2.解析文件
const jade=require('jade');
// var str=jade.render('html');
var str=jade.renderFile('./view/1.jade',{pretty:true});
console.log(str);

jade部分

html
    head
    body
        div
            a(href='http://www.baidu.com') 百度
            input(type='text',name='uname',value='用户名')
            div(style="width:100px;height:100px")
            div(style={width:'100px',height:'100px'})
            div(class='box left active')
            div(class=['box','left','active']) aaa
                span bbb
            div
                |aaaa
        script
            include 1.js

在jade中做运算

js部分

const jade=require('jade');
var str=jade.renderFile('./view/3.jade',{pretty:true,a:3,b:5});
console.log(str);

jade部分

html
    head
    body
        div a+b=#{a+b}
        div #{a}
        div #{b}
        h1=a
        h1=b

jade解析style class

js部分

const jade=require('jade');
var str=jade.renderFile('./view/4.jade',{pretty:true,
json:{width:'200px',height:'200px',background:'red'},
arr:['box','left','active']});
console.log(str);

jade部分

html
    head
    body
        div(style=json)
        p(class=arr)

在jade中解析js

js部分

const jade=require('jade');
var str=jade.renderFile('./view/6.jade',{pretty:true,arr:['aaa','bbb','ccc']});
console.log(str);

jade部分

html
    head
    body
        -for(var i=0;i<arr.length;i++)
            div=arr[i] 

在jade中如何循环(同上:在jade中解析js)

js部分

const jade=require('jade');
var str=jade.renderFile('./view/6.jade',{pretty:true,arr:['aaa','bbb','ccc']});
console.log(str);

jade部分

html
    head
    body
        -for(var i=0;i<arr.length;i++)
            div=arr[i] 

在Jade中解析标签

js部分

const jade=require('jade');
var str=jade.renderFile('./view/7.jade',{pretty:true,content:"<h1>dfglkfdkbl;gfblgf;lbhgf;lhbk</h1>"});
console.log(str);

jade部分

html
    head
    body
        div!=content

在jade中做条件判断

js部分

const jade=require('jade');
var str=jade.renderFile('./view/8.jade',{pretty:true});
console.log(str);

//  + - * / %(膜):两个数相除的余数   5%2=1 10%2=0 19%2=1 作用:判断奇偶性

jade部分

html
    head
    body
        -var a=19;
        -if(a%2==0)
            div 偶数
        -else
            div 奇数
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,207评论 0 13
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,748评论 1 45
  • 0. 写在前面 当你开始工作时,你不是在给你自己写代码,而是为后来人写代码。 —— Nichloas C. Zak...
    康斌阅读 5,364评论 1 42
  • In this kata you have to write a simple Morse code decode...
    Magicach阅读 727评论 0 1
  • 交互设计是从得到需求开始的(以产品为主导的公司,交互设计师会参与产品需求与定位,不在本文的讨论范围之内),一般会在...
    弘毅道阅读 763评论 0 11