vue核心语法2

最新推荐文章于 2024-04-18 20:20:27 发布
最新推荐文章于 2024-04-18 20:20:27 发布
阅读量365 收藏
点赞数
分类专栏： # vue 文章标签： vue.js 前端 javascript
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/qq_34491508/article/details/125823319
版权

一、计算属性

1、案例引入

实现如下效果 当姓和名变化时 全名跟着变化

2、使用插值语法实现和methods实现

<body>
<div id="root">
    姓<input v-model="firstName" type="text">
    名<input v-model="lastName" type="text">
    <!--使用插值语法实现-->
    全名<span>{{firstName}}{{lastName}}</span>
    <!--使用methods实现 vue当数据发生变化 模板重新渲染加载 数据也会重新更新-->
    全名<span>{{fullName()}}</span>
</div>
<script>
    const vm = new Vue({
        el:"#root",
        data:{
            firstName:"",
            lastName:""
        },
        methods:{
            fullName(){
              return this.firstName+this.lastName
            }
        }
    })
</script>
</body>

上面案例插入语法缺点

vue官网风格指南强烈建议插值语法保持简介

3、计算属性定义

要用的属性不存在 要通过已有属性计算得出

4、原理

通过object.defineproperty方法提供的getter和setter

5、优点

和methods对象实现相比 有缓存机制 效率更高 调试方便

备注：计算属性最终出现在vm上 直接读取即可

<body>
<div id="root">
    姓<input v-model="firstName" type="text">
    名<input v-model="lastName" type="text">
    全名<span>{{fullName}}</span>
</div>
<script>
    const vm = new Vue({
        el:"#root",
        data:{
            firstName:"",
            lastName:""
        },
        methods:{
        },
        /*1、fullName属性通过函数计算出的新属性 fullName也在vm对象上
        * 2、功能：当有人读取fullName时 get且返回值作为fullName值
        * 3、会做缓存处理，初次读取和所依赖的数据发生变化时get调用*/
        computed:{
            fullName:{
                get(){
                    return this.firstName+this.lastName
                },
                /*当新属性被修改时候调用*/
                set(){

                }
            }
        }
    })
</script>
</body>

6、计算属性简写方式

确定计算属性只读不写时候才能简写

<body>
<div id="root">
    姓<input v-model="firstName" type="text">
    名<input v-model="lastName" type="text">
    全名<span>{{fullName}}</span>
</div>
<script>
    const vm = new Vue({
        el:"#root",
        data:{
            firstName:"",
            lastName:""
        },
        methods:{
        },
        computed:{
            //简写方式 看着是个函数 实际是个属性
            fullName(){
                return this.firstName+this.lastName;
            }
        }
    })
</script>
</body>

二、监视属性

1、定义

监视某一个属性的变化，只有当监视的属性存在才能监视

2、两种写法

<body>
<div id="root">
    <span>天气{{info}}</span>
    <button @click="changeWeather">切换</button>
</div>
<script>
    const vm = new Vue({
        el:"#root",
        data:{
            isHot:true
        },
        methods:{
            changeWeather(){
                this.isHot = !this.isHot
            }
        },
        computed:{
            info(){
                return this.isHot ? '炎热':'凉爽'
            }
        },
        /*第一种写法：创建实列就已经知道要监视哪个属性就用这种方法*/
        watch:{
            //不仅可以监听data中属性 也可以监视计算属性info
            isHot:{
                immediate:true,//初始化就调用一下handler
                //当ishot发生变化时调用handler
                handler(newValue,oldValue){
                    console.log(newValue,oldValue);
                }
            }
        },
    });
    /*第二种写法：当用户行为发生变化时候才监视用这种*/
    vm.$watch('isHot',{
        immediate:true,
        handler(newValue,oldValue){
            console.log(newValue,oldValue);
        }
    })
</script>
</body>

3、深度监视

vue中的watch默认不监测对象内部值得变化（一层）

配置deep:true可以监测对象内部值得变化（多层）

<body>
<div id="root">
    <span>{{num.a}}</span>
    <button @click="num.a++">切换</button>
</div>
<script>
    const vm = new Vue({
        el:"#root",
        data:{
            num:{
                a:1,
                b:2
            }
        },
        methods:{
        },
        watch:{
            /*监视多级结构中某个属性变化*/
           'num.a':{
               handler(newValue,oldValue){
                   console.log(newValue,oldValue);
               }
           },
           /*监视多级中所有属性变化*/
            num: {
                deep:true,
                handler(newValue,oldValue){
                    console.log(newValue,oldValue);
                }
            }
        },
    });
</script>
</body>

备注：

vue自身是可以监测对象内部值得改变 但vue提供得watch默认不可以

使用watch需要根据数据结构得变化决定是否采用监视

4、简写

<body>
<div id="root">
    <span>{{num.a}}</span>
    <button @click="num.a++">切换</button>
</div>
<script>
    const vm = new Vue({
        el:"#root",
        data:{
            isHot:true
        },
        methods:{
        },
        watch:{
            /*当不用配置deep和immediate时监视可以简写如下*/
           isHot(newValue,oldValue){
               console.log(newValue,oldValue)
           }
        }
    });
    /*当不用配置deep和immediate时监视可以简写如下*/
    vm.$watch('isHot',function (newValue,oldValue) {
        console.log(newValue,oldValue)
    })
</script>
</body>

5、计算属性和监视属性对比

1、computed能完成的功能 watch都可以完成

2、watch能完成的功能 computed不一定能完成 例如watch可以进行异步操作

3、所有被vue管理的函数最好写成普通函数，别用箭头函数，这样this的指向才是vm

4、所有不被vue管理的函数（定时器函数、ajax回调函数、promise回调函数）最好携程箭头函数 这样this指向才是vm或者组件实列对象

三、样式绑定

1、通过class绑定样式（三种方式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <style>
        .basic{
            width: 200px;
            height: 200px;
        }
        .active1{
            background-color: rosybrown;
        }
        .active2{
            border-radius: 20px;
        }
        .active3{
            border-color: green;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="root">
    <!--字符串写法：适用于样式的类名不确定需要动态指定-->
    <div class="basic" :class="one"></div>
    <!--数组写法：适用于要绑定的样式个数不确定 名字也不确定-->
    <div class="basic" :class="two"></div>
    <!--对象写法：适用于要绑定的样式个数确定 名字也确定 但要动态决定用不用-->
    <div class="basic" :class="three"></div>
</div>
<script>
    const vm = new Vue({
        el:"#root",
        data:{
            one:'active1',
            two:['active1','active2'],
            three:{
                active2:true,
                active3:true
            }
        },
    });
</script>
</body>
</html>

2、通过style绑定样式（2种）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <style>
        .basic{
            width: 200px;
            height: 200px;
        }
        .active1{
            background-color: rosybrown;
        }
        .active2{
            border-radius: 20px;
        }
        .active3{
            border-color: green;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="root">
    <!--对象写法-->
    <div class="basic" :style="styleObj">222</div>
    <!--数组写法-->
    <div class="basic" :style="styleArr">333</div>
</div>
<script>
    const vm = new Vue({
        el:"#root",
        data:{
            one:'active1',
            two:['active1','active2'],
            styleObj:{
                borderRadius:"20px",
                backgroundColor:"red"
            },
            styleArr:[
                {
                    borderRadius:"20px",
                    backgroundColor:"red"
                },
                {
                    fontSize:"20px",
                    padding:"20px"
                }
            ]
        },
    });
</script>
</body>
</html>

四、条件渲染和列表渲染

1、条件渲染

1.1、v-show语法

1、底层使用的是display实现，仅仅时样式的移除

<body>
<div id="root">
    <!--直接写表达式-->
   <div v-show="true">{{name}}</div>
    <!--通过属性控制-->
    <div v-show="flag">{{name}}</div>
</div>
<script>
    const vm = new Vue({
        el:"#root",
        data:{
            name:'hello',
            flag:true
        },
    });
</script>
</body>

1.2、v-if语法

1、v-if条件渲染时不展示dom的元素直接移除，而不是使用display隐藏

2、v-if可以和v-else-if、v-else一起使用 但要求结构不能被打断

3、template只能配置v-if使用（使用template不会破坏原来的元素结构）

html结构直接删掉

<body>
<div id="root">
    <!--直接写表达式-->
   <div v-show="true">{{name}}</div>
    <!--通过属性控制-->
    <div v-show="flag">{{name}}</div>
</div>
<script>
    const vm = new Vue({
        el:"#root",
        data:{
            name:'hello',
            flag:true
        },
    });
</script>
</body>

1.3、比较

1. 如果需要频繁切换 v-show 较好 因为节点在只是隐藏了

2. 当条件不成立时, v-if 的所有子节点不会解析

2、列表渲染

2.1、v-for

v-for指令用于展示列表数据，语法：v-for="(item,index) in xxx" :key="yyy"

可以遍历数组、对象、字符串、指定次数

<body>
<div id="root">
    <div>
        <!--遍历数组-->
        <h2 v-for="(item,index) in arr">{{item}}--{{item.id}}--{{item.name}}--{{index}}</h2>
        <!--遍历对象-->
        <h2 v-for="(value,key) in obj" >{{key}}--{{value}}</h2>
        <!--遍历字符串-->
        <h2 v-for="(item,index) in str" >{{item}}--{{index}}</h2>
        <!--遍历指定次数-->
        <h2 v-for="(number,index) of 5" >{{number}}--{{index}}</h2>
    </div>
</div>
<script>
    const vm = new Vue({
        el:"#root",
        data:{
            arr:[
                {
                    id:1,
                    name:'一'
                },
                {
                    id:2,
                    name:'二'
                },
                {
                    id:3,
                    name:'三'
                }
            ],
            obj:{
                id:1,
                age:12,
                name:'张三',
                sex:'男'
            },
            str:'hello',
        },
    });
</script>
</body>

2.2、key的作用和原理

3、列表过滤

案例截图，输入关键字模糊展示

3.1、使用监视属性实现

<body>
<div id="root">
    <input v-model="keyWord">
    <ul>
        <li v-for="(item,index) in filPersons" :key="item.id">{{item.id}}-年龄{{item.age}}-{{item.name}}</li>
    </ul>
</div>
<script>
    const vm = new Vue({
        el:"#root",
        data:{
            keyWord:'',
            persons:[
                  {id:1, name:'张三',age:10},
                {id:2, name:'李四',age:20},
                {id:3, name:'王五',age:30}
            ],
            filPersons:[]
        },
        watch:{
            keyWord:{
                immediate:true,
                handler(val){
                    this.filPersons = this.persons.filter((p)=>{
                        /*indexOf(str)没有找到返回-1 找到返回下表位置，如果var是''即空字符串，
                        则返回0即每个字符串都包含空字符串在开头*/
                        return p.name.indexOf(val)!== -1;
                    })
                }
            }
        }
    });
</script>
</body>

3.2、使用计算属性实现

<body>
<div id="root">
    <input v-model="keyWord">
    <ul>
        <li v-for="(item,index) in filPersons" :key="item.id">{{item.id}}-年龄{{item.age}}-{{item.name}}</li>
    </ul>
</div>
<script>
    const vm = new Vue({
        el:"#root",
        data:{
            keyWord:'',
            persons:[
                 {id:1, name:'张三',age:10},
                {id:2, name:'李四',age:20},
                {id:3, name:'王五',age:30}
            ],
        },
        computed:{
            filPersons(){
                return this.persons.filter((p)=>{
                    return p.name.indexOf(this.keyWord) !== -1
                })
            }
        }
    });
</script>
</body>

当计算属性和监视都能实现的时候优先选择计算属性

4、列表排序

<body>
<div id="root">
    <input v-model="keyWord" type="text" placeholder="输入关键字查询">
    <button @click="sortType = 2">年龄升序</button>
    <button @click="sortType = 1">年龄降序</button>
    <button @click="sortType = 0">原顺序</button>
    <ul>
        <li v-for="(item,index) in filPersons" :key="item.id">{{item.id}}-年龄{{item.age}}-{{item.name}}</li>
    </ul>
</div>
<script>
    const vm = new Vue({
        el:"#root",
        data:{
            keyWord:'',
            sortType:0,
            persons:[
                {id:1, name:'张三',age:10},
                {id:2, name:'李四',age:20},
                {id:3, name:'张二三',age:90},
                {id:4, name:'王五',age:30}
            ],
        },
        computed:{
            filPersons(){
                const arr = this.persons.filter((p)=>{
                    return p.name.indexOf(this.keyWord) !== -1
                });
                //只要sort不是0 都是true
                if(this.sortType){
                    //sort会改变原数组 filter不会改变原数组
                    arr.sort((pre,next)=>{
                        //sort降序用后一个元素减去前一个元素即可 升序用前一个元素减去后一个元素
                        return this.sortType === 1 ? next.age-pre.age : pre.age-next.age
                    });
                }
                return arr;
            }
        }
    });
</script>
</body>

五、内置指令

1、v-text

向其所在的节点中渲染文档内容；会替换掉其他节点中的内容，但是插值语法表达式不会

2、v-html

向指定节点渲染包含html结构的内容

v-html有安全问题容易导致xss攻击，一定要在可信的内容使用v-html 不要在用户提交的内容

3、v-if

如果为 true, 当前标签才会输出到页面

4、v-else

如果为 false, 当前标签才会输出到页面

5、v-show

通过控制 display 样式来控制显示/隐藏

6、v-for

遍历数组/对象

7、v-on

绑定事件监听, 一般简写为@

8、v-bind

绑定解析表达式, 可以省略 v-bind

9、v-model

双向数据绑定

10、v-cloak

配合css解决由于网速慢是在页面展示{{xx}}问题

正常的html+js+css页面如下 是从头往下渲染的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--如果加载这个资源花了5s（浏览器设置网速模拟） 
    那么前5s是空白界面 然后从上而下加载页面 这个称为页面的阻塞  -->
    <script src="http://xxx/js/vue.js"></script>
</head>
<body>
<div id="root">
    <span>你好</span>
</div>
<script>
    const vm = new Vue({
        el:"#root",
        data:{
           name:'<h3>你好</h3>'
        },
    });
</script>
</body>
</html>

上面也是可以正常运行的

但是js位置也可以放在body中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*设置有v-clock属性的元素样式 v-clock在vue接管元素后自动消失*/
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>
<div id="root">
    <span v-clock>{{name}}</span>
</div>
<script src="http://xxx/js/vue.js"></script>
</body>
<script>
    const vm = new Vue({
        el:"#root",
        data:{
            name:'<h3>你好</h3>'
        },
    });
</script>
</html>

11、v-once

初次动态渲染后就视为静态内容，以后的数据改变不会引起v-once所在结构的更新可以用于优化性能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root">
    <span v-once>初始值{{num}}</span>
    <span>当前值{{num}}</span>
    <button @click="num++">num+1</button>
</div>
<script src="js/vue.js"></script>
</body>
<script>
    const vm = new Vue({
        el:"#root",
        data:{
            num:1
        },
    });
</script>
</html>

12、v-pre

v-pre不会编译当前元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root">
    <span>固定的没有指令的可以加v-pre优化性能</span>
    <span v-pre>{{num}}有指令的不能加v-pre</span>
</div>
<script src="js/vue.js"></script>
</body>
<script>
    const vm = new Vue({
        el:"#root",
        data:{
            num:1
        },
    });
</script>
</html>

 六、vue生命周期

  1. 初始化显示

  • beforeCreate()
  • created()
  • beforeMount()
  • mounted()

  1. 更新状态: this.xxx = value

  • beforeUpdate()
  • updated()

  1. 销毁 vue 实例: vm.$destory()

  • beforeDestory()
  • destoryed()

七、插件

作用

对vue增加作用，本质是一个{}对象，但是要求这个对象必须包含install（安装）方法，所以可以自定义插件

定义

export default {
	/*vue会自动调用 可以带参数  这个Vue参数就是vm的缔造者即vue构造函数*/
	install(Vue,x,y,z){
		console.log(x,y,z)
		//全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})

		//定义全局指令
		Vue.directive('fbind',{
			//指令与元素成功绑定时（一上来）
			bind(element,binding){
				element.value = binding.value
			},
			//指令所在元素被插入页面时
			inserted(element,binding){
				element.focus()
			},
			//指令所在的模板被重新解析时
			update(element,binding){
				element.value = binding.value
			}
		})

		//定义混入
		Vue.mixin({
			data() {
				return {
					x:100,
					y:200
				}
			},
		})

		//给Vue原型上添加一个方法（vm和vc就都能用了）
		Vue.prototype.hello = ()=>{alert('你好啊')}
	}
}

引入并使用

main.js中引入并使用

import MyPlugins from "./MyPlugins";
Vue.use(MyPlugins,1,2,3)

程序三两行
关注
专栏目录
vue基础语法练习源码
12-09
Vue实例是整个应用的核心，它通过`new Vue()`创建。在HTML文件中，我们通常使用`<script>`标签引入Vue库，并创建实例，将DOM元素与Vue实例绑定。例如： ```html <script src="https://cdn.jsdelivr.net/npm/vue@2"> ...
从Vue基础语法入手
08-10
本教程将从Vue的基础语法开始，逐步深入，帮助你理解这个强大的工具在实际项目中的应用。 首先，我们从Vue的基本结构说起。一个基本的Vue实例包含`<template>`、`<script>`和`<style>`三个部分。`<template>`用于...
vue 单独页面body css 样式设置
weixin_33798152的博客
02-19 3423
vue 单独页面body css 样式设置 给某个page下template中的第一个div设置如下样式： .body-bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow-y: auto; ba...
vue中给body单独设置样式
热门推荐
大把小米的博客
06-10 1万+
在vue项目中，有时候会需要给单独的页面中的body设置样式，下面是两种方法 1.在beforeCreate()中给body添加属性 beforeCreate() { document.querySelector('body').setAttribute('style', 'background-color:#fffcf5;') }, 2.给最外层的div添加个类名，然后处理 <template> <div class="body-bg
如果把vue组件动态添加到body上？
徐同保的专栏
02-07 2209
如果把vue组件动态添加到body上？
Vue组件添加挂载到body下
我是咸鱼闲又闲
10-21 5139
组件挂载到body层级下 因为一些原因，需要把子组件挂载到body层级下，以此来解决问题。 效果图： 废话少说，上代码 在组件内部加入以下代码： mounted() { // 切记 一定要在组件里加 this.$nextTick(() => { const body = document.querySelector("body"); if (body.append) { body.append(this.$el); } else {
Vue
qq_46070108的博客
04-04 184
1、第一个Vue程序 1.1、导入开发版本的Vue.js <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 1.2、创建Vue实例对象，设置el属性和data属性 <script> var app = new Vue({ el:"#app", data:{
Vue基础语法.zip
最新发布
09-03
Vue.js的核心库只关注视图层，易于上手，同时与其他库或现有项目整合也相对容易。以下是关于Vue语言的详细介绍及常用语法 Vue.js是一种流行的前端JavaScript框架，由尤雨溪于2014年发布。它被广泛应用于构建交互式...
主要讲解vue2的基本语法 及相关案例演示
04-09
Vue.js是一套用于构建用户界面的渐进式JavaScript框架，由尤雨溪创建。Vue的第二个版本，即Vue2，是...随着Vue3的推出，Vue2的许多概念和语法在新版本中得到了延续和改进，但学习Vue2依然是掌握Vue生态的一个重要环节。
Vue.js学习笔记之常用模板语法详解
10-19
不过，本文介绍的文本渲染、表达式、过滤器等基础知识是Vue.js开发中使用频率最高的模板语法，是每个Vue.js开发者都需要掌握的核心概念。 综上所述，Vue.js通过其简洁直观的模板语法，极大地简化了JavaScript Web...
Vue3去除body默认样式，去除白边
2301_80272947的博客
04-18 895
在项目src目录下新建styles文件夹，在styles下新建reset.scss 的文件将下面的代码复制进去。然后在 项目根目录找到index.html，在里面添加代码。在进行Vue3搭建时，默认样式会出现白边。
vue框架中单页面文件更改body，html页面背景颜色
weixin_40716786的博客
10-13 5575
单页面应用中，在全局body设置了背景颜色和背景图片。但是想要修改其中的一个页面如'/result'这个文件,而又不影响其他的样式，以前看到有例子用position:fixed来修改背景，我个人认为这个仅仅适用于页面篇幅不大，一屏足以显示的页面。可以在‘/result’这个css加上scoped 然后在js的部分加以下代码。亲自试验很有效果。。。 beforeCreate () { ...
vue中改变v-html中包含body标签的样式修改方法
飞翔༒之翼
01-18 1406
就可以改变body里的样式。
vue中将元素加入body中
shidouyu的专栏
07-07 6446
// 将弹框加入Body中 addRemoveDateWinToBody(type) { this.$nextTick(() => { const body = document.querySelector('body') if (type) { // 显示 let zDateWin = this.$refs.zDateWin let pTabName = zDateWin.paren...
vue的最外层body宽度不能填满浏览器页面
qq_55861339的博客
09-30 596
中，设置width和height为100%，对margin进行重写去掉边距。vue默认为body设置了。可以在App.vue。
Vue自定义组件实现类似elementUI的append-to-body功能，将创建的元素插入、挂载到body上面（网页最外层），适用于父元素overflow: hidden、绝对定位fixed的场景
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
08-20 3998
【代码】Vue自定义组件实现类似elementUI的append-to-body功能，将创建的元素插入、挂载到body上面（网页最外层），适用于父元素overflow: hidden、绝对定位fixed的场景。
把vue组件添加到body下
小太阳的博客
09-17 3043
写了个xxx组件 为了减少父级html的影响，需要把组件的$el放在body下 在mounted放法中写： this.$nextTick(() => { const body = document.querySelector("body"); if (body.append) { body.append(this.$el); } else { body.appendChild(this.$el); } });
怎么把组件挂载到body上_javascript – 如何将Vue的主应用程序渲染到body元素？
weixin_39586649的博客
12-20 1297
使用Vue 2.0,您无法将根实例安装到body或html元素.您将获得[Vue警告]：不要将Vue挂载到< html>或者< body> – 改为安装到普通元素.错误信息.The provided element merely serves as a mounting point. Unlike in Vue 1.x, the mounted element will b...
vue 自定义组件插入到body中的实现
记录点滴
05-20 9949
以notice提醒组件为例，调用组件，如下， 实现了两个方法： show方法时显示组件 remove方法销毁组件 // 加载组件 let noticeCom = vm.$create({ title: '提醒标题', content: '提醒内容', duration: 2000 // 组件的显示时长 }).show() // 销毁 noticeCom.remove() 实现思路： （1）首先创建组件 （2）使用render函数加载组件 （3）$mount挂载组件
Vue2基本语法与实战：组件化、数据绑定解析
"这篇教程主要关注Vue2的基础语法和实践案例，涵盖了计算属性、数据绑定等核心概念。Vue2作为一款流行的前端框架，以其组件化、声明式编码和高效的虚拟DOM等特点著称，提升了开发效率并优化了代码复用。官方文档是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序三两行

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值