Vue2（二）：事件处理，计算属性、监视属性、两者区别

最新推荐文章于 2024-05-18 21:18:02 发布
最新推荐文章于 2024-05-18 21:18:02 发布
阅读量102 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51000853/article/details/132547824
版权

一、事件相关问题

1.事件处理

1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
2.事件的回调需要配置在methods对象中，最终会在vm上；
3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；this是window；
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；
6.如果不传参,默认第一个形参是事件对象；如果传参,按照参数顺序来接,如果想接事件对象,要传入$event关键字。

<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<!-- <button v-on:click="showInfo">点我提示信息</button> -->
			<button @click="showInfo1">点我提示信息1（不传参）</button>
			<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
			},
			methods:{
				showInfo1(event){
					// console.log(event.target.innerText)
					// console.log(this) //此处的this是vm
					alert('同学你好！')
				},
				showInfo2(event,number){
					console.log(event,number)
					// console.log(event.target.innerText)
					// console.log(this) //此处的this是vm
					alert('同学你好！！')
				}
			}
		})
	</script>

2.事件修饰符（前三比较重要）

1.prevent：阻止默认事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有event.target是当前操作的元素时才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；移动端常用。

<!-- 准备好一个容器-->
	<div id="root">
		<h2>欢迎来到{{name}}学习</h2>
		<!-- 1.prevent阻止默认事件（常用） -->
		<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

		<!-- 2.stop阻止事件冒泡（常用） -->
		<div class="demo1" @click="showInfo">
			<button @click.stop="showInfo">点我提示信息</button>
			<!-- 修饰符可以连续写 -->
			<!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
		</div>

		<!-- 3.once事件只触发一次（常用） -->
		<button @click.once="showInfo">点我提示信息</button>

		<!-- 4.capture使用事件的捕获模式 -->
		<div class="box1" @click.capture="showMsg(1)">
			div1
			<div class="box2" @click="showMsg(2)">
				div2
			</div>
		</div>

		<!-- 5.self只有event.target是当前操作的元素时才触发事件； -->
		<div class="demo1" @click.self="showInfo">
			<button @click="showInfo">点我提示信息</button>
		</div>

		<!-- 6.passive事件的默认行为立即执行，无需等待事件回调执行完毕； -->
		<ul @wheel.passive="demo" class="list">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>

	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	new Vue({
		el: '#root',
		data: {
			name: 'xyl'
		},
		methods: {
			showInfo(e) {
				alert('前面写挺好！')
				// console.log(e.target)
			},
			showMsg(msg) {
				console.log(msg)
			},
			demo() {
				for (let i = 0; i < 100000; i++) {
					console.log('#')
				}
				console.log('滚动一万次之后这个事件，调用完了页面才滚动')
			}
		}
	})
</script>

3.键盘事件

<!-- 准备好一个容器 -->
<div id="root">
    <h2>欢迎来到{{name}}学习</h2>
    <input type="text" placeholder="按下回车输出" @keyup.enter="showInfo">
    <input type="text" placeholder="按下回车输出" @keyup.13="showInfo">
    <input type="text" placeholder="按下回车输出" @keyup.huiche="showInfo">
    <input type="text" placeholder="按下删除或退格输出" @keyup.delete="showInfo">
    <input type="text" placeholder="按下切换大小写输出" @keyup.caps-lock="showInfo">
</div>

<script>
    Vue.config.keyCodes.huiche = 13; //定义一个别名为huiche的enter按键

    const vm = new Vue({
        el: '#root',
        data: {
            name: 'xyl',
        },
        methods: {
            showInfo(e) {
                // if (e.keyCode !== 13) return  //原生js实现按下回车输出值
                console.log(e.target.value);
            }
        }
    })
</script>
按键代码
回车enter
删除delete（捕获删除和退格键）
退出esc
空格space
换行tab（特殊，必须配合keydown使用）
上up
下down
左left
右right
  1. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
    比如我想按下切换大小写的按键就触发showInfo：
<input type="text" placeholder="按下切换大小写输出" @keyup.caps-lock="showInfo">

  1. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

  2. 系统修饰键（用法特殊）：ctrl、alt、shift、meta
    (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
    (2).配合keydown使用：正常触发事件。

  3. 也可以使用keyCode去指定具体的按键（不推荐）已经在删除中

<input type="text" placeholder="按下回车输出" @keyup.13="showInfo">
  1. Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
Vue.config.keyCodes.huiche = 13; //定义一个别名为huiche的enter按键

补充两个细节

  1. 修饰符可以连续写
<button @click.stop.prevent="showInfo">你好</button>
  1. 如果先让两个键同时按下才触发，键名也可以连续绑定
    比如按下ctrl+y触发showInfo方法
<input type="text" @keyup.ctrl.y="showInfo">

二、计算属性

1. 使用插值语法和methods拼接姓名

插值语法，不好观察，写的太复杂。
method语法，每次改写要重新调用fullName，缓存多

<body>
	<!-- 准备好一个容器-->
	<!-- 第一种写法插值语法实现 (字符串的slice方法,左闭右开截取字符串)-->
	<div id="root">
		姓：<input type="text" v-model="firstName"> <br /><br />
		名：<input type="text" v-model="lastName"> <br /><br />
		全名：<span>{{firstName.slice(0,3)}}-{{lastName}}</span>
	</div>
</body>

<!-- <body> -->
	<!-- 准备好一个容器-->
	<!-- 第二种写法methods实现 -->
	<!-- <div id="root">
		姓：<input type="text" v-model="firstName"> <br /><br />
		名：<input type="text" v-model="lastName"> <br /><br />
		全名：<span>{{fullName()}}</span> //重新调用
	</div>
</body> -->

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el: '#root',
			data: {
				firstName: '张',
				lastName: '三'
			}
			// methods: {
			// 		fullName(){
			// 			console.log('@---fullName')
			// 			return this.firstName + '-' + this.lastName
			// 		}
			// 	},
		})
	</script>

2.计算属性实现总结

  1. 定义：要用的属性不存在，要通过已有属性计算得来。
  2. 原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
  3. get函数什么时候执行？
    (1).初次读取时会执行一次。
    (2).当依赖的数据发生改变时会被再次调用。
  4. 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
  5. 备注：
    (1).计算属性最终会出现在vm上，直接读取使用即可。
    (2).如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

3.使用计算属性拼接姓名

  1. computed配置对象，里面要写get，作用当有人读取fullName时，get就会被调用，且返回值就作为fullName的值。
  2. vm._data 里有 data的属性，methods的函数。但是computed里面的东西是对象，最后是在vm的对象名。
	<!-- 准备好一个容器-->
		<div id="root">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			测试：<input type="text" v-model="x"> <br/><br/>
			全名：<span>{{fullName}}</span> <br/><br/>
			<!-- 全名：<span>{{fullName}}</span> <br/><br/>
			全名：<span>{{fullName}}</span> <br/><br/>
			全名：<span>{{fullName}}</span> -->
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
				x:'你好'
			},
			methods: {
				demo(){
					
				}
			},
			computed:{
				fullName:{
					//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
					//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
					get(){
						console.log('get被调用了')
						// console.log(this) //此处的this是vm
						return this.firstName + '-' + this.lastName
					},
					//set什么时候调用? 当fullName被修改时。
					set(value){
						console.log('set',value)
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
					}
				}
			}
		})
	</script>

4.计算属性简写

只考虑读取不考虑修改时可使用简写

<body>
		<!-- 准备好一个容器-->
		<div id="root">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			全名：<span>{{fullName}}</span> <br/><br/>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
			},
			computed:{
				fullName(){
					console.log('get被调用了')
					return this.firstName + '-' + this.lastName
				}
			}
		})
	</script>

三、监视属性

1.天气案例

要求：在凉爽和炎热之间切换，能被捕获到

  1. 插值语法和三元表达式
  2. 计算属性
<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<!-- 1.利用插值语法和三元表达式
		<h2>今天天气很{{isHot?'炎热' : '凉爽'}}</h2> -->
		<!-- 2.利用计算属性 -->
		<h2>今天天气很{{info}}</h2>
		<!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 -->
		<!-- <button @click="isHot = !isHot">切换天气</button> -->
		<button @click="changeWeather">切换天气</button>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	new Vue({
		el: '#root',
		data: {
			isHot: true
		},
		computed: {
			info() {
				return this.isHot ? '炎热' : '凉爽'
			}
		},
		methods: {
			changeWeather() {
				this.isHot = !this.isHot
			}

		},
	})
</script>

2.监视属性

  1. 当被监视的属性变化时, 回调函数自动调用, 进行相关操作
  2. 监视的属性必须存在，才能进行监视！！
  3. 监视的两种写法：
    (1).new Vue时传入watch配置
    (2).通过vm.$watch监视
<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	new Vue({
		el: '#root',
		data: {
			isHot: true,
		},
		computed: {
			info() {
				return this.isHot ? '炎热' : '凉爽'
			}
		},
		methods: {
			changeWeather() {
				this.isHot = !this.isHot
			}

		},
		// watch: {
		// 	isHot: {
		// 		immediate: true,//初始化时让handler调用一下
		// 		//handler什么时候调用？当isHot发生改变时。
		// 		handler(newValue, oldValue) {
		// 			console.log('isHot被修改了', newValue, oldValue)
		// 		}
		// 	}
		// }
		vm.$watch('isHot', {
			immediate: true,//初始化时让handler调用一下
			//handler什么时候调用？当isHot发生改变时。
			handler(newValue, oldValue) {
				console.log('isHot被修改了', newValue, oldValue)
			}
		})
	})
</script>

3.深度监视：

(1).Vue中的watch默认不监测对象内部值的改变（一层）。
(2).配置deep:true可以监测对象内部值改变（多层）。
备注：
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。

<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
				numbers:{
					a:1,
					b:1,
					c:{
						d:{
							e:100
						}
					}
				}
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			watch:{
				isHot:{
					// immediate:true, //初始化时让handler调用一下
					//handler什么时候调用？当isHot发生改变时。
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				},
				//监视多级结构中某个属性的变化
				/* 'numbers.a':{
					handler(){
						console.log('a被改变了')
					}
				} */
				//监视多级结构中所有属性的变化
				numbers:{
					deep:true,
					handler(){
						console.log('numbers改变了')
					}
				}
			}
		})

	</script>

4.监视属性_简写

所有vue 管理的函数都不能用箭头函数

		watch: {
			//正常写法
			/* isHot:{
				// immediate:true, //初始化时让handler调用一下
				// deep:true,//深度监视
				handler(newValue,oldValue){
					console.log('isHot被修改了',newValue,oldValue)
				}
			}, */
			//简写 函数相当于handler isHot 被监听。 不能配置immediate和deep
			/* isHot(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue,this)
			} */
		}
	})

		//正常写法
	/* vm.$watch('isHot',{
		immediate:true, //初始化时让handler调用一下
		deep:true,//深度监视
		handler(newValue,oldValue){
			console.log('isHot被修改了',newValue,oldValue)
		}
	}) */

		//简写
	/* vm.$watch('isHot',(newValue,oldValue){
		console.log('isHot被修改了',newValue,oldValue,this)
	}) */

四、watch和computed对比

1.对比拼接姓名的案例

		<!-- 准备好一个容器-->
		<div id="root">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			全名：<span>{{fullName}}</span> <br/><br/>
		</div>

计算属性：

	const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
			},
			computed:{
				fullName(){
					console.log('get被调用了')
					return this.firstName + '-' + this.lastName
				}
			}
		})

监视属性：

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
				fullName:'张-三'
			},
			watch:{
				firstName(val){
					setTimeout(()=>{
						console.log(this)
						this.fullName = val + '-' + this.lastName
					},1000);
				},
				lastName(val){
					this.fullName = this.firstName + '-' + val
				}
			}
		})

要求：姓改变时，全名延迟一秒钟改变。只能用watch！可异步

watch: {
    firstName: {
        handler(newVal, oldVal) {
            setTimeout(() => { //一定要写成箭头函数
                this.fullName = newVal + '-' + this.lastName;
            }, 1000);
        }
    }
}

计算属性就不行！不能异步

2.总结

computed和watch之间的区别：
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。

野良T_T
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue 计算属性 vue2.xxx
12-20
computed 计算属性使用
vue-recomputed:可计算的计算属性
05-12
Vue中可计算的可计算属性 :warning: 您可能不需要此功能，请先检查，以及 安装 npm install vue-recomputed 用法 这是展示API的愚蠢示例。 永远不要做这种事情： export default { recomputed : { currentTime ...
Vue中的computed(计算属性)和watch(监听属性)的区别
m0_70647221的博客
05-09 2412
computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed 如果computed属性属性值是函数 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 ，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中..
vue的计算属性和监视属性
qq_52619560的博客
07-20 325
计算属性: 1. 定义:要用的属性不存在,要通过已有的属性计算得来 监视属性watch: 1. 当监视的属性变化时,回调函数自动调用,进行相关操作 2. 监视的属性必须存在,才能进行监视 3. 监视的两种写法: (1).new Vue时传入watch配置 (2).通过vm.$watch监视...
Vue2基础 04：事件处理
最新发布
Fxcrisp的博客
05-18 911
Vue2基础知识：事件处理
Vue中计算属性computed和监视属性watch的区别
ChuanyangChen的博客
10-04 632
Vue中计算属性computed和监视属性watch的区别 computed和watch之间的区别 computed能完成的功能，watch都能完成 watch能完成的功能，computed不一定能完成，例如watch可以进行异步操作 使用中的原则 所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实力对象 所有不被Vue所管理的函数（定时器⏲️的回调函数，ajax的回调函数，Promise的回调函数），最好写成箭头函数，这样this的指向才是vm或组件实例对象 ...
Vue2（二）：计算属性、监视属性、二者的区别
weixin_42044763的博客
08-10 1184
定义：要用的属性不存在，要通过Vue中已有属性计算得来。原理：底层借助了Objcet.defineproperty方法提供的getter和setter。get函数什么时候执行？(1).初次读取时会执行一次。(2).当依赖的数据发生改变时会被再次调用。优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。备注：1.计算属性最终会出现在vm上，直接读取使用即可，不用加括号，和methods区别一下子。2.如果计算属性要被修改，那必须写set函数去响应修改，......
vue：计算属性和监视属性的区别和内在联系
helloWorldJavaQi的博客
12-01 210
前端初级学习总结 1.<button onclick="click()">点我</button> 其中click命名的自定义函数不会生效，而且不会报错，click是js中的原有函数，不可以用作自定义函数名 2.计算属性computed：两个因素：基于计算依赖的的data中的数据属性；？；。简化格式必须只有读取数据而没有写数据的情况才可以，相对methods来说性能更好，有缓存机制，第一次读取数据的时候，会通过getter从data中取数据，然后会自动加载进缓存，第二次读取，只要数据没
vue-async-computed：Vue.js的异步计算属性
02-06
使用此插件，您可以在Vue中具有异步计算的计算属性。 如果不使用此插件，则无法执行以下操作： new Vue ( { data : { userId : 1 } , computed : { username ( ) { // Using vue-resource return Vue . ...
vue计算属性computed、事件、监听器watch的使用讲解
10-17
今天小编就为大家分享一篇关于vue计算属性computed、事件、监听器watch的使用讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
vue中的计算属性实例详解
10-17
在Vue.js中，计算属性（Computed Properties）是一个强大的特性，它允许我们定义基于其他数据（如Vue实例的数据属性或方法）的复杂逻辑，并在需要时自动更新。这使得我们的模板保持简洁，专注于展示数据，而将复杂的...
【Vue2】事件
Superman_H的博客
02-08 805
# 绑定事件 `v-on:事件类型="方法名 / 表达式 / 简单 JS 语句"`，可以缩写为 `@事件类型="方法名 / 表达式 / 简单 JS 语句"` * #### `@事件类型="方法名"` ```html 点击打印数据 ``` ```js let vm = new Vue({ el: '#app', methods: { // methods 里存放方法，thi
Vue2--事件处理
WikL116824的博客
07-13 128
一些基本的事件处理
vue2.x的事件系统
写点什么好
11-12 181
带参和不带参 如果要传参数，必须写（），如不传参数，爱写不写 不写（）,默认参数就是event 写（） 显式传参，event名字叫：$event 常用的修饰符 阻止默认事件 .prevent 阻止事件冒泡 .stop 一次性事件 .once 自身事件 .self 按键事件 .enter 代码片段 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta
vue2知识点：事件处理
刘大猫
05-20 1959
文章目录一、事件的基本使用二、$event 对象三、事件的修饰符1）prevent2）阻止事件冒泡3）once4）capture5）self6）passive四、键盘事件(键值修饰符) 一、事件的基本使用 注意点1：定义事件函数时，普通函数this指代vue对象，而箭头函数中this指代Window对象。 注意点2：定义事件没参数小括号()可省略，但是用在插值表达式使用一个函数返回值就必须带小括号()，比如 全名：{{fullName()}}。 注意点3：不被vue所管理的函数那么请使用箭头函数。 代.
【Vue2】Vue2中的事件和方法全解
Jessieeeeeee的博客
01-17 3641
Vue2中的事件和方法全解
vue-2(事件处理、表单绑定、组件)
天明的博客
05-29 524
继上一篇博客这边继续补充基础内容加强一下记忆 监听事件 v-on指令去监听DOM事件，后面可以接事件类型,如下案例<div id="example-3"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</bu...
Vue2中的绑定事件和事件修饰符
weixin_64770583的博客
07-13 1411
绑定事件和事件修饰符
Vue2（六）组件自定义事件、全局事件总线、$nextTick、动画与过渡
DogEgg_001的博客
08-03 1011
在App.vue中：-- 自定义事件schoolName 子传父 -->methods: {console.log("app拿到了学校名：" + name)在school.vue中methods: {// 触发自定义事件自定义事件创建绑定后实际是存在于vc的events属性中，通过$emit()激发this.$off('stuName') //解绑单个自定义事件this.$off(['stuName', 'demo']) // 解绑多个自定义事件。
04_Vue基础-Options API.pptx
01-25
"Vue基础课程关于Options API的讲解，特别是聚焦于计算属性computed和侦听器watch的使用。" Vue.js的Options API是其核心特性之一，它定义了组件的行为和状态。在这个Vue基础课程中，重点讲解了如何利用Options API...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值