Jade模板引擎教程

最新推荐文章于 2024-07-16 11:33:12 发布
最新推荐文章于 2024-07-16 11:33:12 发布
阅读量1.2w 收藏 12
点赞数 3
分类专栏： nodeJS 文章标签： nodejs jade
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011781521/article/details/53560987
版权

一、简介


jade是超高性能的node JavaScript模板引擎，有着非常强大的API和大量杰出的特性。它主要针对node的服务端。


下面是它的一些特性

● 客户端支持
● 代码高可读
● 灵活的缩进
● 块展开
● 混合
● 静态包含
● 属性改写
● 安全，默认代码是转义的
● 运行时和编译时上下文错误报告
● 命令行下编译jade模板
● html 5 模式 (使用 !!! 5 文档类型)
● 在内存中缓存(可选)
● 合并动态和静态标签类
● 可以通过 filters 修改树
● 模板继承
● 原生支持 Express JS
● 通过 each 枚举对象、数组甚至是不能枚举的对象
● 块注释
● 没有前缀的标签
● AST filters
● 过滤器
    ● :sass 必须已经安装sass.js
    ● :less 必须已经安装less.js
    ● :markdown 必须已经安装markdown-js 或者node-discount
    ● :cdata
    ● :coffeescript 必须已经安装coffee-script
● Vim Syntax
● TextMate Bundle
● Screencasts
● html2jade 转换器


jade中，分清什么是静态的，什么是动态的


 ●  静态的原封不动的表现在html中，动态的会转换表现
 ●  js代码会执行，js表达式会取值，标签会转换，文本直接输出
         ○ 标签后是文本，文本可以单行和多行
         ○ 文本中可嵌入jade表达式；使用#{}，里面是后台js表达式
         ○ -开头的，随后是后台js代码
         ○ 几个特定的jade关键词，例如循环控制等，随后的都是后台表达式
         ○ html标签紧跟着=，后面的是js表达式


jade中，分清什么是标签、文本和代码


 ● jade的任何一段文本，都要区分是标签、文本和代码
 ● jade以-开头的，随后是后台js代码
 ● jade的格式总体是标签+文本，有三种
     ○ 标签(缩进) ：随后的缩进是文本
     ○ 标签=(缩进)：随后的缩进是js表达式
     ○ 标签. ： 随后的多行缩进都是文本，不必使用|
●jade的多行文本每行以|开头
●jade的多行文本，每行又可以交叉使用=或者-（有bug）


二、安装jade


通过 npm安装:


npm install -g jade




执行上面的命令，全局安装。



三、一个简单的例子



在D盘下创建一个myproject目录。


通过命令行进入该目录下执行:  express 创建一个express项目(默认创建的是jade的)




完整的目录结构:




package.json的内容为


{
  "name": "myproject",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.15.2",
    "cookie-parser": "~1.4.3",
    "debug": "~2.2.0",
    "express": "~4.14.0",
    "jade": "~1.11.0",
    "morgan": "~1.7.0",
    "serve-favicon": "~2.3.0"
  }
}

views/index.jade的内容为 


extends layout

block content
  h1= title
  p Welcome to #{title}


测试:

先安装依赖:npm install




再运行项目: npm start




访问: http://localhost:3000/




修改index.jade为


doctype 
html
	head
		title= pageTitle
		script(type='text/javascript').
			function showCityEx(city)
			{
				return city + " & " + city;
			}
		
	body
		//--@test转义;以下几个字符有特殊意义；如果当做文本，必须使用|转义
		//--@test转义1: - ，jade代码的开头
		//--@test转义2: | ，jade多好文本的开头
		//--@test转义3: / ，jade注释的开头
		//--@test转义4: = ，jade代码表达式的开头
		|- i begin at "-" (use |-prefix in jade)<br/>
		||- i begin at "|"(use |-prefix in jade)<br/>
		|//--i begin at "//"(use |-prefix in jade)<br/>
		|=i begin at "="(use |-prefix in jade)

		h1 #{h1}
	
		#container.col
			if name=='liuchuanchuan'
				p You are owner!
			else
				p You are #{name},and you are not owner!
		
		//--@test_后台js代码，特别注意缩进相当于括号，以 - 开头--
		-var a=new Array()	
		-for(var i=0; i<citys.length; i++) 
			-	a.push(citys[i])
			-	a[a.length-1] = a[a.length-1] + "_1"		
		p	old:#{a.length},#{a}
		-a.push('qingdao')
		p	new:#{a.length},#{a}
		p
			|I had ever goto lots of citys(more than #{a.length}).<br/>
			-a.push('chengdu')	//--这里的缩进影响是否会新添加一个<P>;这种语法有点扯淡
			=(a.length+10) + " "
			|is my dream!<br/>
			|I had ever goto lots of citys(#{a}).
			|I like to travel!
			|do you?

		p.
			i had go to

		p=	"now length = " + a.length
			|<br/>haha
		ul
			for city in citys
				li= city
			else
				li sorry, no city!

		//--@test_后台jade代码，特别注意循环的使用--
		p	this is an example of table.
		table(border=1)
			tr
				th hello
				th world,citys.count=#{cscores.length + 3}
				th count
			for city,index in citys
				tr
					td= index
					td welcome to #{city}(#{city.substr(0,4)})
					td= cscores[index]
		div	over!


index.js修改为


var express = require('express');
var router = express.Router();
var jade = require('jade');

// Compile a function
var fn = jade.compile('hello world #name', {});

// Render the function
var html = fn({name:'liu'});
console.log(html);

// 渲染字符串
var rtn = jade.render('.csser.com hello,#{name}', { name: 'liuchuanchuan' });
console.log(rtn);


// 渲染文件
var city_names = [
	'wuhan',
	'tianjin',
	'beijing',
	'shanghai'
];

var city_scores = [
	'60',
	'62',
	'80',
	'70'
];

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { citys: city_names, cscores: city_scores, name:'liuchuanchuan',h1:'who are you'});
});


module.exports = router;

重新启动项目,刷新浏览器,输入如下




完整的demo: http://download.csdn.net/detail/u011781521/9707783


四、Jade语法规则


官方文档: https://pugjs.org/api/getting-started.html


文档声明和头尾标签的定义在jade中直接使用向下面的语法


1.Doctype 文档类型


常用的有这么几种格式


doctype html   

生成的是这种类型 <!DOCTYPE html>


doctype xml                                 

<?xml version="1.0" encoding="utf-8" ?>

doctype transitional                       

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">


doctype strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


doctype frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


2.标签


默认情况下，在一行的开头的文本（或空格后）代表了一个HTML标签。缩进标记嵌套，形成树形结构的HTML。


在 Jade 中创建一个列表：


ul
  li Item A
  li Item B
  li Item C


生成的 HTML：


<ul>
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
</ul>


像这种img 标签必须被正确地关闭


img


生成的 HTML：


<img/>


2.1块扩张


为了节省空间,jade为嵌套标签提供了一个内联的语法。


a: img


生成的 HTML：


<a><img/></a>


2.2自关闭的标签


标签,比如img,元,和链接会自动自闭(除非你使用XML文档类型)。你也可以显式地自我关闭标签通过附加/字符。


foo/
foo(bzr='baz')/

生成的 HTML：


<foo/>
<foo bar= />


3.注释


Jade 支持两种注释：单行注释和多行注释。每种注释支持两种模式：输出到源文件和不输出到源文件。


在 Jade 中创建一个单行输出注释和单行不输出注释：


// 这个单行注释会输出到编译后的文件中
p 单行输出注释


//- 这个单行注释不会输出到编译后的文件中
p 单行不输出注释


生成的 HTML：


<!-- 这个单行注释会输出到编译后的文件中-->
<p>单行输出注释</p>
<p>单行不输出注释</p>


由上可见，输出和不输出的差别就在于多了一个 -


相比起单行注释，多行注释的内容要在注释符号的下一行，以相同的缩进来编写。多行注释的输出和不输出模式和单行注释相同，需要使用 - 标记：


// 
这个多行注释会输出到编译后的文件中
这个多行注释会输出到编译后的文件中
p 多行输出注释


//- 
这个多行注释不会输出到编译后的文件中
这个多行注释不会输出到编译后的文件中
p 多行不输出注释


生成的 HTML：


<!-- 
这个多行注释会输出到编译后的文件中
这个多行注释会输出到编译后的文件中
-->
<p>多行输出注释</p>
<p>多行不输出注释</p>



4.属性


在 Jade 中填写属性，基本上和 HTML 保持了一致：


input(type='checkbox', checked)
input(
  type='checkbox'
  name='agreement'
  checked
)


生成的 HTML：


<input type="checkbox" checked>
<input type="checkbox" name="agreement" checked>


还可以根据条件设置属性


- var authenticated = true
body(class=authenticated ? 'authed' : 'anon')
- var currentUrl = '/about'
a(class={active: currentUrl === '/'} href='/') Home
a(class={active: currentUrl === '/about'} href='/about') About


生成的 HTML：


<body class="authed"></body>
<a href="/">Home</a><a href="/about" class="active">


对于频繁使用到的类名和 ID 名，Jade 提供了两种字面量：类名字面量和 ID 字面量——非常类似 Emmet 的用法。

如果不在字面量前边指定标签名，则默认使用 div :



.link
a.link
#button
a#button


生成的 HTML：


<div class="link"></div>
<a class="link"></a>
<div id="button"></div>
<a id="button"></a>


另一个常常会被 JavaScript 修改的属性就是 style 。为了更方便地修改该属性，Jade 接收一个类似 JavaScript 对象类型的参数：


a(style={color: 'red', background: 'green'})


生成的 HTML：


<a style="color:red;background:green"></a>


为了更方便地添加其他自定义属性，jade 特意增加了一个语法格式 &attributes:


- var attributes = {'data-foo': 'bar'};
div#foo(data-bar="foo")&attributes(attributes)


生成的 HTML：


<div id="foo" data-bar="foo" data-foo="bar"></div>


5.文本


Jade 支持三种文本输出方式：单行文本、管道文本和多行文本：


// 单行文本内容直接跟在标签名后面
p 这里是单行文本内容
// 管道文本使用管道符
p 
| 这是一行管道文本，行数无限制
| 这是一行管道文本，行数无限制
| 这是一行管道文本，行数无限制
| ……
// 多行文本需要在标签名后添加点号
p.
这是多行文本，注意缩进
这是多行文本，注意缩进
这是多行文本，注意缩进


生成的 HTML：


<!-- 单行文本内容直接跟在标签名后面-->
<p>这里是单行文本内容</p>
<!-- 管道文本使用管道符-->
<p>
  这是一行管道文本，行数无限制
  这是一行管道文本，行数无限制
  这是一行管道文本，行数无限制
  ……
</p>
<!-- 多行文本需要在标签名后添加点号-->
<p>
  这是多行文本，注意缩进
  这是多行文本，注意缩进
  这是多行文本，注意缩进
</p>


6.代码嵌入


将 JavaScript 嵌入到 Jade 中，一共有三种方法。第一种方式是使用 - ，代码中的特殊字符不会被转义：


- for (var x = 0; x < 3; x++)
  li <a></a>


生成的 HTML：


<li><a></a></li>
<li><a></a></li>
<li><a></a></li>


第二种方法是使用 = ，代码中的特殊字符将会被转义：


p
  = 'This code is <escaped>!'


生成的 HTML：


<p>This code is <escaped>!</p>


第三种方法是使用 != ，代码中的特殊字符不会被转义：


p
  = 'This code is <escaped>!'


生成的 HTML：


<p>This code is <escaped>!</p>


7.条件语句


if ... else if ... else 这个经典的条件判断，它也是 Jade 最基本的条件语句：


- var user = { description: 'foo bar baz' }
- var authorised = false
#user
  if user.description
    h2 Description
    p.description= user.description
  else if authorised
    h2 Description
    p.description.
      User has no description,
      why not add one...
  else
    h1 Description
    p.description User has no description


生成的 HTML：


<div id="user">
  <h2>Description</h2>
  <p class="description">foo bar baz</p>
</div>


此外，Jade 还提供了一个 unless 条件语句。如果说 if 可以通过判断 给定条件是否符合要求 来执行下一步，那么 unless 完全是相反的一件事，它会判断 给定条件是否不符合要求 ，如果不符合，就执行下一步。


- var con = false
unless con
  p Hello, World


生成的 HTML：


<p>Hello, World</p>


8.分支语句


当需要 if 判断的条件过多时，其他语言会提供类似 switch 的分支判断语句。在 Jade 中，也提供了类似的语法—— case ：


- var friends = 10
case friends
  when 0
    p you have no friends
  when 1
    p you have a friend
  default
    p you have #{friends} friends


生成的 HTML：


<p>you have 10 friends</p>


在 Jade 中并没有提供类似 break 的语法，对于所有的条件默认只有一种输出结果，如果没有符合条件的就输出 defualt 中的内容。但是，有一个特例：


- var friends = 0
case friends
  when 0
  when 1
  default
    p you have #{friends} friends


生成的 HTML：


<p>you have very 0 friends</p>


9.遍历语句


Jade 使用 each 对数组和对象遍历，用法与 JavaScript 大同小异。


// 遍历数组
ul
  each val, index in ['zero', 'one', 'two']
    li= index + ': ' + val


// 遍历对象
ul
  each val, index in {1:'one',2:'two',3:'three'}
    li= index + ': ' + val


生成的 HTML：


<!-- 遍历数组-->
<ul>
  <li>0: zero</li>
  <li>1: one</li>
  <li>2: two</li>
</ul>
<!-- 遍历对象-->
<ul>
  <li>1: one</li>
  <li>2: two</li>
  <li>3: three</li>
</ul>



10.循环语句


Jade 使用 while 实现循环，用法还是中规中矩的与 JavaScript 相似：


- var n = 0
ul
  while n < 4
    li= n++


生成的 HTML：


<ul>
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>


11.includes


实现高度复用的另一种方式就是将代码片段保存到不同文件中，然后在需要的地方导入这些片段，为此，Jade 提供了 include 指令，下面是一个 index 页面：


//- index.jade
doctype html
html
  include ./includes/head.jade
  body
    h1 My Site
    p Welcome to my super lame site.
    include ./includes/foot.jade


head 代码片段：


//- includes/head.jade
head
  title My Site
  script(src='/javascripts/jquery.js')
  script(src='/javascripts/app.js')


footer 代码片段：


//- includes/foot.jade
#footer
  p Copyright (c) foobar


生成的 HTML：


<!doctype html>
<html>
  <head>
    <title>My Site</title>
    <script src='/javascripts/jquery.js'></script>
    <script src='/javascripts/app.js'></script>
  </head>
  <body>
    <h1>My Site</h1>
    <p>Welcome to my super lame site.</p>
    <div id="footer">
      <p>Copyright (c) foobar</p>
    </div>
  </body>
</html>


12.继承

Jade 中使用 extends 来继承代码片段，与 include 本本分分地引用代码段不同，继承可以修改代码片段。
首先，在 layout 页面使用 block 标识符，设置一个可修改的代码片段，紧跟 block 标识符之后的是该代码片段的名字：


//- layout.jade
doctype html
html
  head
    block title
      title Default title
  body
    block content


然后，在 index 页面继承 layout ，并可以根据代码片段的名字修改相关代码：


//- index.jade
extends ./layout.jade


block title
  title Article Title


block content
  h1 My Article


生成的 HTML：


<!doctype html>
<html>
  <head>
    <title>Article Title</title>
  </head>
  <body>
    <h1>My Article</h1>
  </body>
</html>


上述这种继承方式，会抹除原来代码片段的部分，如果想要追加代码片段，可以使用 append 和 prepend 指令。 append 用于在原有代码片段之后追加， prepend 用于在原有代码片段之前追加。一个初始页面：


//- layout.jade
html
  head
    title Layout
  body
    block content
      p Hello


使用 append :


extend layout


block append content
    p World


生成的 HTML：


<html>
  <head>
    <script src="/vendor/jquery.js"></script>
    <script src="/vendor/caustic.js"></script>
  </head>
  <body>
    <p>Hello</p>
    <p>World</p>
  </body>
</html>


使用 prepend ：


extend layout

block prepend content
    p World


生成的 HTML：


<html>
  <head>
    <script src="/vendor/jquery.js"></script>
    <script src="/vendor/caustic.js"></script>
  </head>
  <body>
    <p>World</p>
    <p>Hello</p>
  </body>
</html>



码农致富
关注
专栏目录
Node.js开发入门—使用jade模板引擎
安晓辉生涯——聚焦程序员的职业规划与成长
08-11 3万+
jade模板引擎的简介以及学习资源的链接……如何在express里使用jade模板引擎……
Express全系列教程之(十)：渲染jade模板引擎
no10086的博客
04-30 566
一、前言 随着前端业务的不断发展，页面交互逻辑的不断提高，让数据和界面实现分离渐渐被提了出来。JavaScript的MVC思想也流行了起来，在这种背景下，基于node.js的模板引擎也随之出现。 什么是模板引擎？ 它用于解析动态数据和静态页面所生成的视图文件，将原本静态的数据变为动态，快速地实现页面交互； 目前使用较广的模板引擎有以下几种：Jade / Pug、EJS、Handlebars。 ja...
最新最详细的MDI Jade安装包下载安装教程(保姆级)
最新发布
Ba2213的博客
07-16 1176
在XRD分析中，定性分析也就是进行物相检索，主要是通过实验测量或理论计算，建立一个“已知物相的卡片库”，将所测样品的图谱与 PDF卡片库中的“标准卡片”进行一一对照，然后根据其三强峰峰位、峰强及样品中的元素进行判定是否存在这种物相。MDI Jade用于处理X射线衍射的数据，把经过Jade软件透彻分析的结果形象生动的展现给用户，除了基本的显示图谱、打印图谱、数据平滑等功能。2、图谱拟合——可以安装不同的锋行函数对单峰或全谱拟合，拟合过程是结构精修、晶粒大小、微观应变、残余应力计算等功能的必要步骤；
jade模板引擎
Fred's Note
02-15 223
jade是一种源于node的模板引擎，可以直接通过json对象渲染出html页面。 本文参考《jade-源于Node.js的html模板引擎》等网络文章对其基础特性进行梳理： 1、赋值 #user #{name} &amp;lt;#{email}&amp;gt; 此处#user会生成一个id为user的div，同时利用name和email进行赋值，结果为：&lt;div id="user...
Jade 模板引擎使用
10-22 138
在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模板引用 (Extends) 在 Express 中调用 jade 模板引擎 var express = require('express'); var http...
Jade模板
胡桃夹子
05-03 427
Express框架里内嵌了Jade模板引擎。正好项目里也要用到，本篇整理了下Jade的相关用法。1.安装与执行 2.标签和属性 3.多行文本 4.变量 5.语句 6.Mixin 7.模板 8.注释 9.过滤器安装与执行安装很简单： npm install jade –global 安装后本地随便新建一个sample.jade文件，执行： jade sample.jade
模板引擎Jade
weixin_34166847的博客
08-02 113
前言：node.js的模板引擎有多种，如：ejs，Handlebars，jade。一开始首先学习了ejs，但是发现其有一个很大的弊端，那就是它不能继承（由于之前用的全部是thinkphp的模板，所以用起来非常别扭，只能进行include，而不能extend），于是转为jade，将html做了一层抽象的模板引擎。 安装jade 利用npm全...
nodejs前端模板引擎swig入门详解
10-18
Swig是node.js中一个流行的前端模板引擎，它的特点在于语法简单、易于理解和使用，与传统的Jade模板引擎相比，Swig更贴近标准的HTML结构，这使得许多习惯了传统HTML的开发者更容易上手。 Swig模板引擎的主要特点...
初识前端模板引擎jade
xi_2130的博客
02-12 1929
1.什么是模板引擎？（我的理解）模板引擎：为了使用户界面与业务数据（内容）分离而产生的，根据特定的规则生成特定文档，各个领域都可以有自己的模板引擎。 web模板引擎：最终生成的文档是HTML类型。 而这种规则有五花八门，各种各样的规则就是不同的模板引擎。 本文主要讲jade2.jade的安装（windows）jade是基于nodeJs的，所以首先要安装运行环境 nodeJs，包管理工具npm
Jade —— 源于 Node.js 的 HTML 模板引擎
12-14
Jade 是一个高性能的模板引擎，它深受 Haml 影响，它是用 JavaScript 实现的，并且可以供 Node 使用。该文档是本人根据网络资源进行整理后形成的，更多交流欢迎访问我的“伟博小城”，地址：http://www.webczw.com/
java模板引擎 jade_jade模板引擎
weixin_31133141的博客
02-25 454
jade是使用JavaScript实现，可供nodejs使用的高性能模板引擎(性能高不高，有些争议。姑且称之为高性能吧！)。模板引擎有很多，主要使用比较广泛的是jade和ejs，modejs项目默认使用jade作为模板引擎，我也就不多说了至于如何选择，还是得就事论事综合各种因素来考虑。在此不对优缺点进行分析。插一句嘴，ejs的语法更像jsp、asp这样的技术而jade更像python的语法风格，缩...
让我们来聊聊 jade 模板引擎
Mr. Han
02-02 668
jade 模板引擎 jade 是高性能的node JavaScript模板引擎，它主要针对node的服务端 它是侵入式的模板引擎，和普通的 HTML 和 CSS 是无法共存的，强依赖的模板引擎 既然学习了 node，那怎么可以不知道 jade 的用法呢？？ 让我们来一起学习以下他的基本语法吧！！！ jade 安装：cnpm install jade 使用：引入 const jade
Jade模板引擎入门教程
chengqinjian6893的博客
11-07 203
Jade是一款高性能简洁易懂的模板引擎，Jade是Haml的Javascript实现，在服务端（NodeJS）及客户端均有支持。 功能 客户端支持 超强的可读性 灵活易用的缩进 块扩展 代码默认经过编码处理以增强安全性 编译及运行时的上下文错误报告 命令行编译支持 HTML5模式（使用!!!...
java模板引擎 jade_模板引擎Jade详解
weixin_39713578的博客
02-13 119
有用的符号：| 竖杠后的字符会被原样输出· 点表示下一级的所有字符都会被原样输出，不再被识别。(就是|的升级版，实现批量)include 表示引用外部文件短杠说明后面跟着的字符只是一段代码(与|的区别就是，|后面的内容会被显示，而短杠后面的内容直接不显示了！)例子:js：const jade = require('jade');console.log(jade.renderFile('./xxx....
jade模板
weixin_33970449的博客
01-06 104
jade 模板使用 npm install jade -g 安装到全局 jade index.jade 导出一个 index.html 压缩后的 jade -P index.jade 导出一个 index.html 没有压缩的 jade -P -w index.jade -w 对文件实时编译 特殊的div ....
Node.js-Jade模板引擎
张新丁
12-26 262
3. Jade模板引擎   (1) 使用        const ejs = require('ejs');               ejs.renderFile(path, data, (err, html) =&gt; {         })  (2) 模板语法 Jade.js: const http = require('http'); const jade = re...
深入理解Jade模板引擎：应用解析
"这篇教程详细介绍了模板引擎Jade在应用中的各种技巧和语法，包括原始字符输出、包含外部文件、代码块控制、变量引用、循环结构、条件判断以及DOCTYPE声明等核心概念。" Jade是一种简洁高效的HTML模板引擎，它允许...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值