vue3 ts setup 组合式API 使用教程

最新推荐文章于 2024-05-17 15:36:58 发布
最新推荐文章于 2024-05-17 15:36:58 发布
阅读量1.1k 收藏 12
点赞数 29
分类专栏： vue 文章标签： vue.js javascript 前端 typescript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wsjzzcbq/article/details/136402218
版权

vue3中新增了组合式API，本文讲解组合式API setup 的使用

关于setup 的出现和 vue3 js setup 的使用，笔者已经在2022年的文章中说明，这里不再赘述，需要的朋友可以阅读：《vue3 setup 使用教程》

官网文档：https://cn.vuejs.org/

目录

1、新建vue3 ts 项目

2、响应式变量

3、v-model 双向数据绑定

4、计算属性 computed

4.1、基本使用

4.2、可写的计算属性

5、侦听器 watch

5.1、基本使用

5.2、深层侦听

5.3、即时回调

5.4、一次性侦听

5.5、watchEffect()

6、模板引用 ref

7、类与样式绑定

7.1、绑定对象

7.2、绑定数组

7.3、三元表达式

7.4、绑定内联样式

8、生命周期钩子

9、父子组件通信

9.1、基本使用

9.2、搭配 TypeScript 使用

9.3、事件校验

10、依赖注入

1、新建vue3 ts 项目

在电脑上的空白文件目录下打开 cmd 窗口，执行下面命令

npm create vue@latest

输入y 按回车

输入项目名 vue3-ts-project

是否使用 ts 语法，选择 是

是否启用 JSX 支持，这个不影响学习，是或否都行，笔者选择 是

是否引入vue router，选择 是

是否使用 Pinia 用于状态管理，选择 是

是否引入 Vitest 用于单元测试，选择 是

是否要引入一款端到端测试工具，选择 不需要

是否引入 ESLint 用于代码质量检测，选择 是

是否引入 Prettier 用于代码格式化，选择 否

创建完成

进入项目目录，安装依赖

cd vue3-ts-project

安装依赖

npm install

依赖安装完成

依赖安装完成后，使用 VS Code 打开项目

执行下面命令运行项目

npm run dev

浏览器访问：http://localhost:5173/

出现这个页面说明项目创建成功

2、响应式变量

先将 main.css 中的样式替换为下面代码

@import './base.css';

#app {
  margin: 0 auto;
  padding: 2rem;
  font-weight: normal;
}

再App.vue 原来的内容全部删除，替换为下面代码

<template>
 <div>
  <p>{{name}}</p>
  <button @click="change">修改</button>
 </div>
</template>

<script setup lang="ts">
let name = '年少相逢意气豪,千金买醉度良宵'
function change() {
    name = '调筝人去秋风冷,一院梧桐影自摇'
}
</script>

<style scoped>
</style>

运行效果

发现点击按钮，变量不能修改，这是因为默认的 name 不再像vue2 一样默认就是响应式变量，需要使用 ref 或 reactive 函数转换一下，看下面代码

使用 ref

<template>
 <div>
  <p>{{name}}</p>
  <button @click="change">修改</button>
 </div>
</template>

<script setup lang="ts">
import { ref , reactive } from 'vue'
let name = ref('年少相逢意气豪,千金买醉度良宵')
function change() {
    name.value = '调筝人去秋风冷,一院梧桐影自摇'
}
</script>

<style scoped>
</style>

运行效果

使用 reactive

<template>
 <div>
  <p>{{nameObj.name}}</p>
  <button @click="change">修改</button>
 </div>
</template>

<script setup lang="ts">
import { ref , reactive } from 'vue'
let nameObj = reactive({name:'一客若蜀士，相逢意气豪'})
function change() {
    nameObj.name = '偶谈唐夹寨，遂及楚成皋'
}
</script>

<style scoped>
</style>

运行效果

注意 ref 和 reactive  的区别

ref 一般处理基本类型；reactive 处理复杂的数据类型

3、v-model 双向数据绑定

<template>
 <div>
  <p>{{name}}</p>
  <input type="text" v-model="name" />
 </div>
</template>

<script setup lang="ts">
import { ref , reactive } from 'vue'
let name = ref('顿洗风尘恶，都忘箠辔劳')

</script>

<style scoped>
</style>

运行效果

4、计算属性 computed

使用 computed 可实现计算

4.1、基本使用

<template>
 <div>
  <p>{{numberOfOnlineUsers}}</p>
  <button @click="add">添加在线人数</button>
 </div>
</template>

<script setup lang="ts">
import { ref , reactive, computed } from 'vue'
let name = ref('顿洗风尘恶，都忘箠辔劳')
let users = ref([])
const numberOfOnlineUsers = computed(()=>{
    return users.value.length > 0 ? '当前在线人数'+ users.value.length : '无人在线'
})
const add = ()=>{
    let date = new Date()
    users.value.push(date.getTime())
}
</script>

<style scoped>
</style>

运行效果

4.2、可写的计算属性

计算属性默认是只读的，可以通过同时提供 getter 和 setter 来创建

<template>
 <div>
  <p>{{bookInfo}}</p>
  <button @click="add">修改书籍信息</button>
 </div>
</template>

<script setup lang="ts">
import { ref , reactive, computed } from 'vue'
const bookName = ref('三国演义')
const authorName = ref('罗贯中')

const bookInfo = computed({
  // getter
  get() {
    return bookName.value + ' ' + authorName.value
  },
  // setter
  set(newValue) {
    let tmp = newValue.split(' ')
    bookName.value = tmp[0]
    authorName.value = tmp[1]
  }
})
const add = ()=>{
    bookInfo.value = '红楼梦 曹雪芹'
}
</script>

<style scoped>
</style>

运行效果

5、侦听器 watch

5.1、基本使用

<template>
 <div>
  <input type="text" v-model="name">
 </div>
</template>

<script setup lang="ts">
import { ref , reactive, watch } from 'vue'
let name = ref('三国演义')
watch(name, (newValue, oldValue)=>{
    console.log(oldValue);
    console.log(newValue);
})

</script>

<style scoped>
</style>

运行效果

5.2、深层侦听

深层侦听器需要添加 deep: true 属性。默认直接给 watch() 传入一个响应式对象，会隐式地创建一个深层侦听器——该回调函数在所有嵌套的变更时都会被触发，相比之下，一个返回响应式对象的函数，只有在返回不同的对象时，才会触发回调

看下面代码

<template>
 <div>
    <p>{{book.name}}</p>
    <button @click="change">修改</button>
 </div>
</template>

<script setup lang="ts">
import { ref , reactive, watch } from 'vue'
let book = reactive({name:'西游记', author: '施耐庵'})
watch(()=>book, (newValue)=>{
    console.log(newValue);
}
)

const change = ()=> {
    book.name = '道德经'
}
</script>

<style scoped>
</style>

运行效果

可以看到没有触发侦听

添加 深层侦听 后看下面代码

<template>
 <div>
    <p>{{book.name}}</p>
    <button @click="change">修改</button>
 </div>
</template>

<script setup lang="ts">
import { ref , reactive, watch } from 'vue'
let book = reactive({name:'西游记', author: '施耐庵'})
watch(()=>book, (newValue)=>{
    console.log(newValue);
},
{ deep: true }
)

const change = ()=> {
    book.name = '道德经'
}
</script>

<style scoped>
</style>

运行效果

5.3、即时回调

watch 默认是懒执行的，只有当数据源变化时，才会执行回调 。如果想在创建侦听器时，立即执行一遍回调，可以通过传入 immediate: true 选项来强制侦听器的回调立即执行

<template>
 <div>
  <input type="text" v-model="name">
 </div>
</template>

<script setup lang="ts">
import { ref , reactive, watch } from 'vue'
let name = ref('三国演义')
watch(name, (newValue, oldValue)=>{
    console.log(oldValue);
    console.log(newValue);
},
{ immediate: true }
)

</script>

<style scoped>
</style>

运行效果

5.4、一次性侦听

默认侦听器是每当被侦听源发生变化时，侦听器的回调就会执行。如果想让回调只在源变化时触发一次，可以使用 once: true 选项

<template>
 <div>
  <input type="text" v-model="name">
 </div>
</template>

<script setup lang="ts">
import { ref , reactive, watch } from 'vue'
let name = ref('三国演义')
watch(name, (newValue, oldValue)=>{
    console.log(oldValue);
    console.log(newValue);
},
{ once: true }
)

</script>

<style scoped>
</style>

运行效果

5.5、watchEffect()

当侦听器的回调使用与源完全相同的响应式状态时，可以使用 watchEffect 简化代码

先看 watch 的代码

<template>
 <div>
  <input type="text" v-model="name">
 </div>
</template>

<script setup lang="ts">
import { ref , reactive, watch, watchEffect } from 'vue'
let name = ref('三国演义')
watch(name, ()=>{
    httpGetRequest(name.value)
},
{ immediate: true }
)
//模拟发送请求
function httpGetRequest(username:string) {
    console.log('发送请求：' + username);
}
</script>

<style scoped>
</style>

运行效果

使用 watchEffect 简化上面 watch 代码

<template>
 <div>
  <input type="text" v-model="name">
 </div>
</template>

<script setup lang="ts">
import { ref , reactive, watch, watchEffect } from 'vue'
let name = ref('水浒传')
// watch(name, ()=>{
//     httpGetRequest(name.value)
// },
// { immediate: true }
// )
watchEffect(()=>{
    httpGetRequest(name.value)
})
//模拟发送请求
function httpGetRequest(username:string) {
    console.log('发送请求：' + username);
}
</script>

<style scoped>
</style>

运行效果

6、模板引用 ref

ref 是一个特殊的 attribute，它允许我们在一个特定的 DOM 元素或子组件实例被挂载后，获得对它的直接引用

<template>
 <div>
    <input ref="inputRef" type="text">
    <button @click="get">获取</button>
 </div>
</template>

<script setup lang="ts">
import { ref , reactive, watch } from 'vue'
const inputRef = ref(null)

const get = ()=> {
    console.log(inputRef.value);
    inputRef.value.focus()
}
</script>

<style scoped>
</style>

运行效果

7、类与样式绑定

7.1、绑定对象

<template>
 <div>
    <div :class="{ active: isActive }">
        <p>忽匆匆，三月桃花随水转。</p>
        <p>飘零零，二月风筝线儿断。</p>
        <p>噫，郎呀郎，</p>
        <p>巴不得下一世，你为女来我做男。</p>
    </div>
    <br>
    <div :class="classObject">
        一朝别后，二地相悬。
    </div>
    <button @click="change">改变</button>
 </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
let isActive = ref(true)
const classObject = reactive({
  active: true,
  'text-primary': true
})
const change = ()=> {
    isActive.value = false
    classObject.active = false
    classObject['text-primary'] = false
}
</script>

<style scoped>
.active {
    background: #f56c6c;
}
.text-primary {
    color: #ffff;
}
</style>

运行效果

7.2、绑定数组

<template>
 <div>
    <div :class="[activeClass, primaryClass]">
        万语千言说不完，百无聊赖，十依栏杆。
    </div>
 </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
const activeClass = ref('active')
const primaryClass = ref('text-primary')
</script>

<style scoped>
.active {
    background: #f56c6c;
}
.text-primary {
    color: #ffff;
}
</style>

运行效果

7.3、三元表达式

<template>
 <div>
    <!-- 三目表达式单独使用 -->
    <div :class="[isActive ? activeClass : primaryClass]">
        <p>六月三伏天，人人摇扇我心寒。</p>
        <p>五月石榴红似火，偏遇阵阵冷雨浇花端。</p>
    </div>
    
    <br>
    
    <!-- 三目表达式和其他样式一起使用 -->
    <div :class="[isActive ? successBackgroundClass : primaryBackgroundClass, textClass]">
        <p>六月三伏天，人人摇扇我心寒。</p>
        <p>五月石榴红似火，偏遇阵阵冷雨浇花端。</p>
    </div>
    <button @click="change">修改</button>
 </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
let isActive = ref(true)
const activeClass = ref('active')
const primaryClass = ref('text-primary')

const textClass = ref('text-class')
const successBackgroundClass = ref('success-background')
const primaryBackgroundClass = ref('primary-background')
const change = ()=> {
    isActive.value = false
}
</script>

<style scoped>
.active {
    color: #67c23a;
}
.text-primary {
    color: #409eff;
}
.text-class {
    color: #ffff;
}
.success-background {
    background: #67c23a;
}
.primary-background {
    background: #409eff;
}
</style>

运行效果

7.4、绑定内联样式

<template>
 <div>
    <!-- 绑定对象 -->
    <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
        十里长亭望眼欲穿。百思想，千系念，万般无奈把郎怨。
    </div>
    <br>
    <div :style="styleObject">
        七弦琴无心弹，八行书无可传。
    </div>
    <br>
    <!-- 绑定数组 -->
    <div :style="[styleObject, backStyles]">
        四月枇杷未黄，我欲对镜心意乱。
    </div>
 </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
const activeColor = ref('#67c23a')
const fontSize = ref(30)
const styleObject = reactive({
  color: '#409eff',
  fontSize: '18px'
})
const backStyles = reactive({
    background: 'black'
})
</script>

<style scoped>
</style>

运行效果

8、生命周期钩子

官网 实例生命周期的图表

在setup 中引入生命周期函数使用

<template>
 <div>
    <p>{{name}}</p>
    <button @click="change">修改</button>
 </div>
</template>

<script setup lang="ts">
import { ref, onMounted,onUpdated  } from 'vue'
let name = ref('阅尽天涯离别苦，不道归来，零落花如许。')
const change = ()=> {
    name.value = '花底相看无一语，绿窗春与天俱莫。'
}

onMounted(() => {
    console.log('挂载完成')
})

onUpdated(()=>{
    console.log('更新完成');
})
</script>

<style scoped>
</style>

运行效果

更多生命周期函数可以看官网文档：https://cn.vuejs.org/api/composition-api-lifecycle.html

9、父子组件通信

9.1、基本使用

在 components 目录下定义子组件 Book.vue

代码如下

<template>
    <div>
        <p>书名:{{bookName}}</p>
        <p>作者:{{author}}</p>
        <p>价格:{{price}}</p>
    </div>
    <button @click="buy">下单</button>
    <button @click="cart">加入购物车</button>
</template>
<script setup lang="ts">
//父传子定义props
const props = defineProps({
    bookName: String,
    author: {
        type: String,
        //必传
        required: true
    },
    price: Number
})
//定义子传父事件
const emit = defineEmits(['buyEmit', 'cartEmit'])
const buy = ()=> {
    emit('buyEmit', props.bookName)
}
const cart = ()=> {
    emit('cartEmit')
}
</script>

在 App.vue 中引入 Book.vue

<template>
 <div>
    <Book :bookName="name" :author="author" :price="price" @buyEmit="buy" @cartEmit="cart" />
 </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Book from '@/components/Book.vue'
let name = ref('稼轩长短句')
let author = ref('辛弃疾')
let price = ref(50)

const buy = (bookName)=> {
    alert(bookName)
}
const cart = ()=> {
    alert('点击购物车')
}
</script>

<style scoped>
</style>

运行效果

9.2、搭配 TypeScript 使用

<template>
    <div>
        <p>书名:{{bookName}}</p>
        <p>作者:{{author}}</p>
        <p>价格:{{price}}</p>
    </div>
    <button @click="buy">下单</button>
    <button @click="cart">加入购物车</button>
</template>
<script setup lang="ts">
//父传子定义props
const props = defineProps({
    bookName: String,
    author: {
        type: String,
        //必传
        required: true
    },
    price: Number
})
//定义子传父事件
const emit = defineEmits<{
    (e: 'buyEmit', bookName:String):void
    (e: 'cartEmit'):void
}>()
const buy = ()=> {
    emit('buyEmit', props.bookName)
}
const cart = ()=> {
    emit('cartEmit')
}
</script>

9.3、事件校验

<template>
    <div>
        <p>书名:{{bookName}}</p>
        <p>作者:{{author}}</p>
        <p>价格:{{price}}</p>
    </div>
    <button @click="buy">下单</button>
    <button @click="cart">加入购物车</button>
</template>
<script setup lang="ts">
//父传子定义props
const props = defineProps({
    bookName: String,
    author: {
        type: String,
        //必传
        required: true
    },
    price: Number
})
//定义子传父事件
const emit = defineEmits({
    //校验 buyEmit 事件
    buyEmit:(bookName:String) => {
        if(bookName.length > 1) {
            console.log('buyEmit error');
            
            return false 
        } else {
            return true
        }
    },
    //没有校验
    cartEmit: null
})


const buy = ()=> {
    emit('buyEmit', props.bookName)
}
const cart = ()=> {
    emit('cartEmit')
}
</script>

运行效果

10、依赖注入

在 App.vue 中提供使用 provide

<template>
 <div>
    <Book :bookName="name" :author="author" :price="price" />
 </div>
</template>

<script setup lang="ts">
import { ref, provide } from 'vue'
import Book from '@/components/Book.vue'
let name = ref('史记')
let author = ref('司马迁')
let price = ref(399)

provide(/* 注入名 */ 'bookShop', /* 值 */ '开心图书商店')
</script>

<style scoped>
</style>

在子组件 Book.vue 中注入使用 inject

<template>
    <div>
        <h1>{{bookShop}}</h1>
        <p>书名:{{bookName}}</p>
        <p>作者:{{author}}</p>
        <p>价格:{{price}}</p>
    </div>
   
</template>
<script setup lang="ts">
import { inject } from 'vue'
const bookShop = inject('bookShop')
//父传子定义props
const props = defineProps({
    bookName: String,
    author: {
        type: String,
        //必传
        required: true
    },
    price: Number
})
</script>

运行效果

依赖注入更详细讲解请阅读笔者文章《vue 依赖注入使用教程》

至此完

悟世君子
关注
  • 29
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ts(typescript)、setup、volar、vue3
nnjjn的博客
03-21 635
ts(typescript) ts是什么 TypeScript 是 JavaScript 的强类型版本，最终在浏览器中运行的仍然是 JavaScript，所以 TypeScript 并不依赖于浏览器的支持，也并不会带来兼容性问题。 TypeScript 这种强类型语言最大的优势在于静态类型检查： 强类型 遵循ES6 编译器严谨的语法检查 基本数据类型 布尔值 let isDone: boolean = false; 数字 let amount: number = 6.
TsSetup_PC(须解压安装)
11-15
TsSetup_PC(须解压安装)
vue3+ts-setup语法糖(props)
mo911108的博客
06-30 3070
vue3 新增了组合式api的语法糖，相应的props，也会有相应的变化。下面是我总结的三种。
vue3+ts实战
最新发布
qq_44930306的博客
05-17 1472
/(vue下面有红色波浪线)注意：如果下载成功，可以在项目的package.json文件里看到对应的版本号。在src包下创建http/api文件夹，并在文件夹下创建http.ts文件;在src包下创建router文件夹，并在文件夹下创建index.ts文件;(1)、router下的index.ts代码。
vue3 ts setup父子组件传值
淡淡的芦苇的博客
12-07 3030
问题描述： 使用<script lang="ts" setup>标签 获取ref总是找不到，起初我以为是传染子组件先后顺序问题 增加一个setTimeout 和nexttick，但是还是找不到ref。 查看资料看到这种写法增加了三个语法糖（父子组件通信）使用defineEmit,defineProps,defineExpose 这里我主要是想父组件 调用子组件的方法，所以使用defineEmit还有获取ref所以使用defineExpose 父组件 <template> <
vue3组合式API标注类型(Ts)
qq_45487080的博客
08-31 701
vue3组合式API标注类型(Ts)
Vue3.x+TS+组合API Computed()
杨勇博客之家
08-25 2389
历史文章目录连接：https://blog.csdn.net/yy763496668/article/details/113117040此链接为CSDN连接，目的为方便大家一览博客目录！内...
vue3+ts实战项目组件工具库.zip
03-03
Vue3中的组件更加灵活，可以通过Composition API组合各种功能。这种模块化的开发方式使得大型项目的管理变得更为容易，同时提高了代码的复用性。 4. 数据可视化："visualization-master"可能是一个专注于数据可视化...
TS+vue3组件开发教程111111111
10-12
总的来说，这个“TS+Vue3组件开发教程”将帮助你掌握Vue 3的最新特性，理解Composition API的使用，以及如何结合TypeScript进行类型安全的组件开发。同时，通过实践Element Plus，你将学会如何将现有的UI库升级到...
vue3+ts 资源课件
03-07
Vue3的`.vue`文件可以直接使用TS语法，通过`@vue/cli`生成的项目模板已经内置了对TS的支持。 7. **Vue CLI 4**：Vue的命令行工具Vue CLI 4为Vue3提供了开箱即用的支持，包括项目创建、热模块替换、构建优化等，使得...
vue3-form-usage：使用vue3的表单用法
02-07
1. **Composition API**: Vue3引入了Composition API，它允许我们在组件中按需组合功能，而不是依赖于单一的data、methods等选项。这对于表单处理非常有利，因为我们可以将表单状态、验证逻辑等单独封装为可复用的...
TS视频合并工具 Setup 0.1.0.exe
04-19
TS视频合并工具x64
VUE3-ts.docx
03-31
4. **组合API**：Vue3.0 引入了类似 React Hooks 的组合API，主要由 `setup` 函数构成。在这个函数中定义的变量和方法需要通过 `return` 显式暴露给外部使用。 5. **自定义渲染API**：Vue3.0 提供了更多的底层访问...
tslib-1.21 ts_setup详解
（空）
03-17 1914
最近跟着韦东山老师的课程，把linux应用，驱动基础学完了，紧跟着课程又完成了第一个linux项目-电子量产工具。 虽然做完了项目，但毕竟不是完全靠自己编写的，所以决定重头看一下项目的整体框架和实现过程。看到触摸屏驱动初始化的时候忘了ts_setup(NULL, 0)的功能了，百度了一下也没结果，便去tslib源码中寻找答案。 我安装的tslib版本是tslib-1.21，创建source insight源码工程就可以查看了。 可以看到初始化Touchscreen中ts_setup传入了NULL和0两
Vue3+Ts的setup()函数的Prop、Emit、Computed、WatchEffect、Watch、Provide/Inject用法
pig_pig32的博客
05-29 4359
Vue3的setup()函数的Prop、Emit、Computed、WatchEffect、Watch、Provide/Inject用法
记录--vue3+setup+ts 知识总结
林恒的博客
03-10 2938
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 vue3 于 2020 年 09 月 18 日正式发布，2022 年 2 月 7 日 vue3 成为新的默认版本 距离 vue3 正式发布已经过去两年有余, 成为默认版本也过去大半年了，以前还能说是对新技术、新特性的观望，而现在面试都直问 vue3 源码了。 我想，不管什么原因，是时候学习 vue3 了 所以这次我也顺便把学习...
vue3_ts setup语法糖做一个登录注册
热门推荐
编程知识分享，主打前端
03-26 3万+
vue3 ts 语法糖搭建一个简单的登录系统平台
初学vue3与ts：setup与setup()下的数据写法
空&白的博客
11-24 733
把setup写在script里 <template> <div> <div class="index-title">script setup</div> <div class="title">字符串：</div> <div class="title-sub">ref版：{{strRef}}</div> <div class="title-sub">ref版模板字符串：{{strRef
vue3+ts setup用法
qq_31171505的博客
07-27 587
vue3 + TypeScript
Vue3+TS快速入门：两小时掌握 TypeScript 核心与 Vue3 组合式API
Vue3引入了全新的组合式API，而TypeScript则提供了强大的静态类型检查，两者结合可以帮助开发者在编码阶段就发现并避免错误，提高代码质量和开发效率。 1. TypeScript核心语法 TypeScript是JavaScript的超集，它...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

悟世君子

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

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

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

打赏作者

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

抵扣说明：

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

余额充值