Vue基础语法（一）

最新推荐文章于 2024-04-29 15:00:49 发布
最新推荐文章于 2024-04-29 15:00:49 发布
阅读量1.7k 收藏 1
点赞数 3
分类专栏： Vue 文章标签： vue.js javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57504000/article/details/124462647
版权

一、模板语法

1.插值

文本

 {{msg}}

 示例：

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式一 手动方式 -->
		<!-- <script src="js/vue.js" type="text/javascript"></script> -->
		<!-- 方式二 CDN -->
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<body>
		<div id="zhq">
			<h1>{{ts}}</h1>
			<h2>插值</h2>
			<ol>
				<li>文本</li>
				<span>
					{{msg}}
				</span>
			</ol>
		</div>
	</body>
	<script>
		// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
		var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					msg:'Hello vue',
					ts:new Date().getTime(),
				}
			},
			methods:{
				
			}
		})
	</script>
</html>

显示：

错误示范：

不信？那就去试吧！！！

<!-- ！！！错误示范！！！ -->
<h1 title="{{msg}}"></h1>

html

使用v-html指令用于输出html代码

示例：

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式一 手动方式 -->
		<!-- <script src="js/vue.js" type="text/javascript"></script> -->
		<!-- 方式二 CDN -->
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<style>
		.cl{
			color: pink;
		}
	</style>
	<body>
		<div id="zhq">
			<h1>{{title}}</h1>
			<h2>插值</h2>
			<ol>
				<li>文本</li>
				<span>
					{{msg}}
				</span>
				
				<li>html</li>
				<span v-html="html"></span>
			</ol>
		</div>
	</body>
	<script>
		// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
		var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					msg:'Hello vue',
					ts:new Date().getTime(),
					html:'<input type="text" value="2"/>',
				}
			},
			methods:{
				
			}
		})
	</script>
</html>

显示：

 应该可以明显看出在span标签中有一个在data中定义的input标签

属性

HTML属性中的值应使用v-bind指令

示例：

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式一 手动方式 -->
		<!-- <script src="js/vue.js" type="text/javascript"></script> -->
		<!-- 方式二 CDN -->
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<style>
		.cl{
			color: pink;
		}
	</style>
	<body>
		<div id="zhq">
			<h1>{{title}}</h1>
			<h2>插值</h2>
			<ol>
				<li>文本</li>
				<span>
					{{msg}}
				</span>
				
				<li>html</li>
				<span v-html="html"></span>
				
				<!-- 
				 1.v-model:数据双向绑定
				 2.v-biand:绑定标签属性值  例：v-bind:css  v-bind:id
				 3.{{}}:插值，针对标签中的文本值进行操作
				 -->
				<li>v-bind绑值</li>
				<span v-bind:class="cls" v-bind:id="123">
					我变色了
				</span>
			</ol>
		</div>
	</body>
	<script>
		// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
		var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					msg:'Hello vue',
					ts:new Date().getTime(),
					html:'<input type="text" value="2"/>',
					cls:'cl',
				}
			},
			methods:{
				
			}
		})
	</script>
</html>

显示：

 我们在外面给cl定义了一个样式，然后用v-bind给span标签绑定class,span中的内容也变色了。

又用v-bind给它绑了一个id为123，在前端控制台也能很清楚的看到

表达式

Vue提供了完全的JavaScript表达式支持

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式一 手动方式 -->
		<!-- <script src="js/vue.js" type="text/javascript"></script> -->
		<!-- 方式二 CDN -->
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<style>
		.cl{
			color: pink;
		}
	</style>
	<body>
		<div id="zhq">
			<h1>{{ts}}</h1>
			<h2>插值</h2>
			<ol>
				<li>文本</li>
				<span>
					{{msg}}
				</span>
				
				<li>html</li>
				<span v-html="html"></span>
				
				<!-- 
				 1.v-model:数据双向绑定
				 2.v-biand:绑定标签属性值  例：v-bind:css  v-bind:id
				 3.{{}}:插值，针对标签中的文本值进行操作
				 -->
				<li>v-bind绑值</li>
				<span v-bind:class="cls" v-bind:id="123">
					我变色了
				</span>
				
				<li>表达式</li>
				<span>
					{{msg.substr(0,6).toUpperCase()}}<br />
					{{ number + 1 }}<br />
					{{ ok ? 'YES' : 'NO' }}
					<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
				</span>
				
			</ol>
		</div>
	</body>
	<script>
		// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
		var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					msg:'Hello vue',
					ts:new Date().getTime(),
					html:'<input type="text" value="2"/>',
					cls:'cl',
					number:1,
					ok:true,
					id:22,
				}
			},
			
			methods:{

			}
		})
	</script>
</html>

显示：

 同样也可以支持JavaScript表达式

第一个：截取（0，6）然后大写

第二个：加法运算

第三个：三元运算符

2.指令

指的是带有“v-”前缀的特殊属性

核心指令

v-if/v-else/v-else-if

代码：

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式一 手动方式 -->
		<!-- <script src="js/vue.js" type="text/javascript"></script> -->
		<!-- 方式二 CDN -->
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<body>
		<div id="zhq">
			<h1>{{title}}</h1>
			<h2>指令</h2>
			<ol>
				<li>v-if / v-else / v-else-if</li>
				<span v-if="sex=='boy'">
					我是男的
				</span>
				<span v-else-if="sex=='girl'">
					我是女的
				</span>
				<span v-else>
					我是男的还是女的？
				</span>
            </ol>
		</div>
	</body>
	<script>
		// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
		var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					ts:new Date().getTime(),
					sex:'gay',
				}
			},
			methods:{
			}
		})
	</script>
</html>

显示： 

当sex=boy时：

 当sex=girl时:

当sex=gay时： 

 

总结：根据其后表达式的bool值进行判断是否渲染该元素

  • 他们只能是兄弟元素
  • v-else-if上一个兄弟元素必须是v-if
  • v-else上一个兄弟元素必须是v-if或者是v-else-if

v-show

代码：

<li>v-show和v-model</li>
<div>
	<input type="checkbox" v-model="flag" />已阅读该协议
	<div v-show="flag">
			嗨害,我出来了
	</div>
</div>

<!-- 在data中定义一个flag -->
flag:false,

 效果：

 

与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"

v-for

代码：

		<div id="zhq">
			<h1>{{title}}</h1>
			<h2>指令</h2>
			<ol>
				<li>v-if / v-else / v-else-if</li>
				<span v-if="sex=='boy'">
					我是男的
				</span>
				<span v-else-if="sex=='girl'">
					我是女的
				</span>
				<span v-else>
					我是男的还是女的
				</span>
				
				<li>v-show和v-model</li>
				<div>
					<input type="checkbox" v-model="flag" />已阅读该协议
					<div v-show="flag">
						嗨害,我出来了
					</div>
				</div>
				
				<li>v-for/v-model/v-bind/{{}}</li>
				<div v-for="(d,i) in arrays">
					i={{i}},d={{d}}
				</div>
		
				<div>
					<select>
						<option value="">--请选择--</option>
						<option v-for="d in depts" v-bind:value="d.id">
							{{d.name}}
						</option>
					</select>
				</div>

				<span v-for="a in depts">
					<input type="checkbox" v-bind:value="a.id" v-model="dt"/>{{a.name}}
				</span><br />
				<span v-if="dt.length!=0">
					{{dt}}
				</span>
			</ol>
		</div>


			data:function(){
				return{
					ts:new Date().getTime(),
					sex:'gay',
					flag:false,
					depts:[
						{id:1,name:'研发部'},
						{id:2,name:'调研部'},
						{id:3,name:'人事部'},
						{id:4,name:'客服部'}
					],
					dt:[],
					arrays:[1,2,3,4,5],
				}
			},

效果：

 

 

 

类似JS的遍历
                 遍历数组: v-for="item in items", items是数组，item为数组中的数组元素
                 遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标

v-model

在Vue入门篇有讲解

用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值   

参数、动态参数、简写

代码：

            <li>参数、动态参数、简写</li>
				<span>
					<!-- <a href="http://www.baidu.com">百度</a><br /> -->
					<a v-bind:[attrname]="url">百度</a><br />
					<a v-on:[eventname]="doClick">点我</a><br />
					<!-- 简写 -->
					<!-- 
					 v-on:简写变成@
					 v-bind:简写变成：
					 -->
					<a :href="url">百度</a><br />
					<a @click="doClick">点我</a>
				</span>

        var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					ts:new Date().getTime(),
					sex:'gay',
					flag:false,
					depts:[
						{id:1,name:'研发部'},
						{id:2,name:'调研部'},
						{id:3,name:'人事部'},
						{id:4,name:'客服部'}
					],
					dt:[],
					arrays:[1,2,3,4,5],
					url:'http://www.baidu.com',
					attrname:'href',
					eventname:'dblclick',
				}
			},
			
			methods:{
				doClick(){
					alert(111);
				}
			}
		})

 效果：

 

在这里href是参数，告知v-bind指令将该元素的href属性与表达式url的值绑定

注1：动态参数表达式有一些语法约束，evName无效,evname有效，回避大写

二、过滤器

全局过滤器

   Vue.filter('filterName', function (value) {
     // value 表示要过滤的内容
   });

局部过滤器

   new Vue({
     filters:{'filterName':function(value){}}
   });

vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：

   <!-- 在两个大括号中 -->
   {{ name | capitalize }}

   <!-- 在 v-bind 指令中 -->
   <div v-bind:id="rawId | formatId"></div>

  •    注1：过滤器函数接受表达式的值作为第一个参数 
  •    注2：过滤器可以串联     
          {{ message | filterA | filterB }}
  •    注3：过滤器是JavaScript函数，因此可以接受参数： 
          {{ message | filterA('arg1', arg2) }}
  •    注4：js定义一个类
           function Stu(){};
           Stu.prototype.add(a,b){};//添加一个新的实例方法

案例

首字母大写/日期格式化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式一 手动方式 -->
		<!-- <script src="js/vue.js" type="text/javascript"></script> -->
		<!-- 方式二 CDN -->
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
		<script src="js/date.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="zhq">
			<h1>{{ts}}</h1>
			<h2>过滤器（全局，局部）</h2>
			<div>
				<!-- 局部过滤器 -->
				{{title|strFilter}}<br/>
				<!-- 全局过滤器 -->
				{{dt|dateFilter|strFilter}}
			</div>
		</div>
	</body>
	<script>
		//全局过滤器
		Vue.filter('dateFilter',function(v){
			return fmtDate(v,'yyyy年MM月dd日')
		});
		
		// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
		var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					ts:new Date().getTime(),
					title:'hello vue!!',
					dt:new Date(),
				}
			},
			
			methods:{
				
			},
			//局部过滤器
			filters:{
				strFilter:function(v){
					return v.substr(0,6).toUpperCase();
				}
			},
		})
	</script>
</html>

效果：


三、计算属性


   计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新

案例

成绩的总分

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式一 手动方式 -->
		<!-- <script src="js/vue.js" type="text/javascript"></script> -->
		<!-- 方式二 CDN -->
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
		<script src="js/date.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="zhq">
			<h1>{{ts}}</h1>
			<h2>计算属性</h2>
				<div v-for="s in score">
					编号={{s.id}},科目={{s.name}},成绩={{s.sc}}
				</div>
				<span >总分：{{sum}}</span>
		</div>
	</body>
	<script>
		// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
		var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					ts:new Date().getTime(),
					score:[
						{id:1,name:'语文',sc:110},
						{id:2,name:'数学',sc:90},
						{id:3,name:'英语',sc:90},
						{id:4,name:'物理',sc:100}
					],
				}
			},
			
			methods:{
				
			},
			computed:{
				sum:function(){
					let s=0;
					for(let sc of this.score)
						s+=sc.sc;
						return s;
				}
			}
		});
	</script>
</html>

效果：


   
四、监听属性

监听属性 watch，我们可以通过 watch 来响应数据的变化
xxx：代表被监听的属性，必须存在
   watch:{
      xxx:function(v){

 

      }
   }

案例

kb/mb转换器

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式一 手动方式 -->
		<!-- <script src="js/vue.js" type="text/javascript"></script> -->
		<!-- 方式二 CDN -->
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
		<script src="js/date.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="zhq">
			<h1>{{ts}}</h1>
			<h2>监听属性</h2>
				kb:<input type="text" v-model="kb" /><br />
				mb:<input type="text" v-model="mb" />
		</div>
	</body>
	<script>
		// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
		var vm=new Vue({
			el:'#zhq',             
			data:function(){
				return{
					ts:new Date().getTime(),
					kb:1024,
					mb:1
				}
			},
			
			methods:{
				
			},
			watch:{
				//监听属性必须保证属性是存在的
				kb:function(v){
					this.mb=v/1024;
				},
				mb:function(v){
					this.kb=v*1024;
				}
			}
		});
	</script>
</html>

效果：

 

小结：计算属性和监听属性的区别

 自己的理解

  • computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
  • computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，

举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择 

  与watch之间的区别：

刚开始总是傻傻分不清到底在什么时候使用watch，什么时候使用computed。这里大致说一下自己的理解：

watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象

那么对比一下,我们很容易得出computed(计算属性)和watch(监听属性)都存在缓存机制的,性能都处优先选择,那么这两者哪个更好呢?

上述很容易得出监听属性比计算属性复杂的多!因此在一个项目同时可以使用计算属性,methods和监听属性实现时候我们优先使用计算属性其次是监听属性,最后选择methods!

夜雨微澜°
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue+element实现美观大方好看的音乐网站，仿照咪咕音乐网
lucky_fang的博客
05-21 5216
vue+element实现美观大方好看的音乐网站，仿照咪咕音乐网，首页样式和框架设计已经实现完成，紧接着就是其他功能页面的实现了，很快作者就会补充实现。关注作者，及时了解更多好项目！作者主页也有更多好项目分享！获取源码或如需帮助，可通过博客后面名片+作者即可！
用vue做一个静态网页包含注册登陆首页详情页（仅用于学习参考）
m0_68913934的博客
05-14 1761
组件设置为Vue实例的模板，这样就可以根据当前URL的不同，自动渲染对应的组件了。最后，需要将各个组件、路由和Vue实例导出，在浏览器中打开。在Vue实例中，我们将。
vue3 使用css新属性v-bind (v-bind+pinia)实现颜色主题切换
w1314_1314的博客
04-29 915
这样下面的组件能直接使用piniaProvider.vue 定义的css。这里我使用了pinia的持久化 如果你也想持久化 跳转以下。不喜欢单个页面写css样式 请看下一步。
vue中v-bind常见用法及综合案例：class点击切换
Jolly_zhang的博客
11-07 1446
vue中v-bind常见用法及综合案例：class点击切换
基于Vue使用Element快速搭建网页（案例详细分析）
weixin_45428910的博客
01-01 1869
基于Vue使用Element快速搭建网页（案例详细分析）
vue小案例
m0_54435916的博客
11-09 307
vue小案例
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
vue基础语法练习源码
12-09
在这个名为"vue基础语法练习源码"的资源中，我们将会探索一些Vue的基础概念和语法，包括HTML文件中的Vue应用实践，如过滤器、自定义插件以及列表渲染等。 首先，让我们深入了解Vue的基础语法。Vue实例是整个应用的...
Vue 基础语法 实例演示 示例代码
最新发布
07-17
Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例...
从Vue基础语法入手
08-10
本教程将从Vue的基础语法开始，逐步深入，帮助你理解这个强大的工具在实际项目中的应用。 首先，我们从Vue的基本结构说起。一个基本的Vue实例包含`<template>`、`<script>`和`<style>`三个部分。`<template>`用于...
前端框架Vue基础语法笔记
01-20
Vue基础语法笔记 本笔记主要涵盖了Vue基础语法的知识点，包括创建Vue实例、数据绑定、事件绑定、循环和数据双向绑定、组件化等方面的内容。 一、创建Vue实例 在Vue中，创建一个实例需要使用Vue.createApp()方法，...
vue 应用案例全解析
12-11
vue，前端框架，移动端前端开发技术，支持ie8以上浏览器
Vue 常用指令 v-bind 设置、绑定元素属性
小楼一夜听春雨，深巷明朝卖杏花
07-05 3458
用于动态绑定一个或多个属性值，或者向另一个组件传递props值(这个后面再介绍)，应用场景:图片地址src、超链接href、动态绑定一些类、样式等等。使用v-bind是因为html标签里面有很多的属性值不是写死的，它也是一个动态的值，是一个变量。data里面定义的属性可以在整个view实例里面去使用，这个是要用this的。v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。使用了v-bind之后，引号里面的就不再是字符串了，而是引用的变量了。使用v-bind就可以在属性里面传递变量了，
vue中的常用基础指令
weixin_50641294的博客
02-26 285
vue中的常用基础指令总结 1.v-text指令（内容渲染指令） <template> <div> <h1>这个文件主要说明v-text的使用</h1> <p>作用:设置标签的文本内容</p> <p>{{msg}}</p&g...
Vue2 案例
weixin_51008360的博客
07-16 834
文本</div>
Vue基础语法（1）
Xmengyan的博客
08-29 162
一.插值操作 1.Mustache (双大括号) {{}} 例： <div id="app"> <p>{{message}}</pp> <p>{{message}} 易烊千玺!</p> <p>{{counter * 2p> </div>3 <script> const app = new Vue({ el: '#app', data: { message
vue3新特性v-bind in CSS
qq_63605379的博客
02-29 876
和是两个不同的概念不要弄混淆了，点击链接可以看官网详细的解释v-bind:是用在template模板中，用来动态绑定参数的内置指令，一般我们用的是简写。v-bind in CSS：是用在style标签中，来获取在script中定义css属性值的变量，即我们能够在style标签中引入动态的css变量了。注意，v-bind in css 是vue3新提出的属性，vue2并没有。
Vue基础篇一：编写第一个Vue程序
热门推荐
我的博客
10-02 1万+
系列文章目录 Vue基础篇一：编写第一个Vue程序 文章目录系列文章目录环境搭建一、编写第一个Hello Vue程序二、编写第一个Vue组件2.1 使用Vue.component方式的缺点三、使用脚手架Vue CLI总结 环境搭建 浏览器：Chrome IDE: VS Code Node.js 10+，npm 一、编写第一个Hello Vue程序 <!DOCTYPE html> <html> <head> <meta charset=
毫无废话，四个小案例手把手教你Vue2基础轻松入门_学习笔记
张晨曦 的 博客
04-14 895
本笔记将通过四个小案例介绍Vue2学习。教程通俗易懂，毫无废话。源自教程，但不局限于教程。有笔者自己的想法和思考。希望能对你有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值