Vue - 2（ 10000 字 Vue2 入门级教程）

已于 2024-05-21 19:56:03 修改
阅读量822 收藏 16
点赞数 24
分类专栏： Vue 文章标签： vue.js javascript 前端
于 2024-04-05 23:01:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73232539/article/details/137407486
版权

一：初识 Vue

1.1 绑定样式

1.1.1 绑定 class 样式

Vue 中绑定 class 的三种方式：

  1. 字符串写法
  2. 数组写法
  3. 对象写法

这段代码演示了在 Vue 中绑定 class 的三种方式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>绑定样式</title>
		<style>
			......
		</style>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		
		<!-- 准备好一个容器-->
		<div id="root">
			<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
			<div class="basic" :class="mood" >{{name}}</div> <br/><br/>

			<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
			<div class="basic" :class="classArr">{{name}}</div> <br/><br/>

			<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
			<div class="basic" :class="classObj">{{name}}</div> <br/><br/
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				mood:'normal',
				classArr:['atguigu1','atguigu2','atguigu3'],//三个类名都会被应用到元素上
				classObj:{
					atguigu1:false,//Vue 根据对象中属性的初始布尔值，决定是否应用相应的类名。
					atguigu2:false,//Vue 根据对象中属性的初始布尔值，决定是否应用相应的类名。
				},
			},
			},
		})
	</script>
</html>

1.1.2 绑定 style 样式

Vue 中绑定样式有两种方式：

  1. 对象写法
  2. 数组写法

这段代码演示了在 Vue 中绑定样式的两种方式：

**<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>绑定样式</title>
		<style>
			......
		</style>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
		
			<!-- 绑定style样式--对象写法 -->
			<div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
			
			<!-- 绑定style样式--数组写法 -->
			<div class="basic" :style="styleArr">{{name}}</div>
			
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				styleObj:{
					fontSize: '40px',
					color:'red',
				},
				styleObj2:{
					backgroundColor:'orange'
				},
				styleArr:[
					{
						fontSize: '40px',
						color:'blue',
					},
					{
						backgroundColor:'gray'
					}
				]
			},
			},
		})
	</script>
	
</html>**

1.2 条件渲染

在 Vue 中，条件渲染是一种根据数据的值来动态显示或隐藏 DOM 元素的技术。Vue 提供了多种方式来实现条件渲染，包括-if、v-else-if、v-else、v-show等指令。

1.2.1. v-if 和 v-else-if`和 v-else

v-if 指令用于根据表达式的值来决定是否渲染一个元素，如果表达式返回 true，则元素被渲染，表达式返回false则不被渲染。v-else-if 和 v-else 则用于在v-if之后添加额外的条件逻辑。

  <p v-if="seen">现在你看到我了</p>
  <p v-else-if="type === 'A'">Type A</p>
  <p v-else-if="type === 'B'">Type B</p>
  <p v-else>Type C</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    seen: true,
    type: 'B'
  }
})
</script>

在这个示例中，<p> 标签根据 seen 的值来决定是否渲染。当 seen 为 true 时，第一个 <p> 标签被渲染；如果 seen 为 false，则该元素不会被渲染。另外，根据 type 的值，也可以决定渲染不同的 <p> 元素。

1.2.2. v-show

v-show 指令也用于根据表达式的值来控制元素的显示与隐藏，但是与 v-if 不同的是，无论条件是否为真，被绑定的元素始终会被渲染到 DOM 中，只是通过 CSS 的 display 属性来控制显示与隐藏而已。

<div id="app">
  <p v-show="seen">现在你看到我了</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    seen: true
  }
})
</script>

在这个示例中，<p> 元素始终存在于 DOM 中，但是根据 seen 的值，它可能是可见的（display: block）或不可见的（display: none）。

条件渲染的选择：

  • v-if 适用于：切换频率较低的场景。
  • v-show 适用于：切换频率较高的场景。

1.2.3 v-if与template的配合使用

在 Vue 中，v-if 指令通常用于条件性地渲染一块内容。有时候，我们可能需要在多个元素之间进行条件渲染，但又不想向 DOM 中添加额外的标签，我们该怎么办呢？

在 Vue 中，<template> 元素在渲染时不会出现在最终的 DOM 中，它只是作为一个逻辑容器来帮助进行条件渲染，这时，就可以使用 <template> 元素与 v-if 指令结合起来，以实现条件渲染而不引入额外的 DOM 元素。

以下是使用 v-if 与 <template> 的配合示例：

<template v-if="isTrue">
  <h1>Title</h1>
  <p>Content</p>
</template>

<template v-else>
  <h1>Another Title</h1>
  <p>Another Content</p>
</template>

在这个示例中，<template> 元素内部包含了要条件渲染的内容，根据 v-if 指令的值来决定是否渲染这段内容。当 isTrue 为 true 时，第一个 <template>素内部的内容会被渲染，否则渲染第二个 <template> 内部的内容。

1.3 列表渲染

1.3.1 v-for

在 Vue 中，v-for 指令用于迭代数组或对象，并为每项数据渲染出对应的元素。

v-for 的语法格式为 v-for="item in items"，其中 item 是形参，可以任意指定，代表数组中的每一项，items 是要遍历的数组。

下面我将详细介绍 v-for 的作用。

作用一：迭代数组：

在 Vue 中，使用 v-for 迭代数组非常常见。下面是一个简单的示例：

<div id="app">
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    items: ['Apple', 'Banana', 'Orange']
  }
})
</script>

运行结果如图所示：
在这里插入图片描述

这段代码的执行流程：

  • 当页面加载时，Vue 实例被创建并挂载到 id 为 app 的 <div> 元素上。
  • Vue 实例开始解析模板，遇到 v-for 指令时，它会遍历 items 数组中的每一项，并为每一项生成一个 <li> 元素，并将当前项的值插入到 <li> 元素的内容中。
  • Vue 实例将解析后的 DOM 结构渲染到页面上，用户就可以看到每个水果名字显示在无序列表中的各个列表项中。
  • 如果后续有任何对 items 数组的修改（例如添加、删除或更新数组中的项），Vue 实例会检测到这些变化并相应地更新 DOM，以保持页面与数据的同步。

作用二：获取索引值

有时候我们需要获取每一项数据的索引值，可以使用第二个参数来获取索引：

<div id="app">
  <ul>
    <li v-for="(item, index) in items">{{ index }}. {{ item }}</li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    items: ['Apple', 'Banana', 'Orange']
  }
})
</script>

运行结果：
在这里插入图片描述

在这个示例中，(item, index) 中的 index 就是每一项数据的索引值。

作用三：迭代对象

除了迭代数组，v-for 也可以用于迭代对象的键值对：

<div id="app">
  <ul>
    <li v-for="(value, key) in object">{{ key }}: {{ value }}</li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: 'John',
      age: 30,
      gender: 'male'
    }
  }
})
</script>

运行结果：
在这里插入图片描述

在这个示例中，(value, key) 中的 value 是对象的值，key 是对象的键。

当然有时候我们只需要对象的值，或者只需要键，可以使用 v-for 的特殊语法：

  • 只获取对象的值：
<div v-for="value in object">{{ value }}</div>
  • 只获取对象的键：
<div v-for="key in object">{{ key }}</div>

作用四：遍历字符串

代码示例：

<div id="app">
  <p v-for="(char, index) in message" :key="index">{{ char }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

执行流程：

  1. 页面加载时，Vue 实例被创建并挂载到 id 为 app 的 <div> 元素上。
  2. Vue 实例开始解析模板，遇到 v-for 指令时，它会遍历 message 字符串中的每个字符。
  3. 对于每个字符，Vue 实例将创建一个 <p> 元素，并将当前字符的值插入到 <p> 元素的内容中。
  4. Vue 实例将解析后的 DOM 结构渲染到页面上，用户可以看到每个字符显示在独立的 <p> 元素中。

页面渲染结果：

在这里插入图片描述

每个字符都被渲染为一个独立的 <p> 元素，并按照它们在字符串中的顺序显示出来。

1.3.2 key 的作用

虚拟DOM中key的作用：

在Vue.js中，当渲染列表或者进行动态数据更新时，Vue会使用虚拟DOM来描述真实DOM的结构。而key就是虚拟DOM对象的标识，它的作用在于帮助Vue识别每个虚拟DOM节点的唯一性。

虚拟 DOM 对比算法规则：

在更新虚拟DOM时，Vue需要比较新旧虚拟DOM，以确定具体的更新操作。比较的规则如下：

  • 当在旧虚拟DOM中找到与新虚拟DOM相同的key时：

    • 若虚拟DOM中内容没变，则直接使用之前的真实DOM，不做更新操作。
    • 若虚拟DOM中内容发生了变化，则生成新的真实DOM，并替换页面中之前的真实DOM。

  • 当在旧虚拟DOM中未找到与新虚拟DOM相同的key时：

    • 创建新的真实DOM，并将其渲染到页面中。

在这里插入图片描述

.用index作为key可能会引发的问题：

在某些情况下，使用列表的索引（index）作为key可能会导致一些问题：

  1. 若对数据进行逆序添加、逆序删除等破坏顺序的操作时，会导致没有必要的真实DOM更新，这会降低页面的效率。
  2. 如果列表中的结构还包含了输入类的DOM，使用index作为key可能会导致错误的DOM更新，从而使界面出现问题。

开发中如何选择key?

在选择key时，我们应该考虑以下几点：

  1. 最好使用每条数据的唯一标识作为key，例如id、手机号、身份证号、学号等具有唯一性的值。
  2. 如果确定不会对数据进行逆序添加、逆序删除等破坏顺序的操作，并且仅用于渲染列表用于展示，那么使用index作为key是没有问题的。

1.3.3 列表过滤

在Vue中，列表过滤通常指的是根据特定条件筛选出列表中的部分项进行展示。这在实际开发中非常常见，特别是当你需要根据用户输入或其他条件来动态显示数据时。

假设我们有一个包含一些用户的列表，我们想要实现一个搜索框，用户可以在搜索框中输入关键词，然后列表会根据输入的关键词动态过滤显示相匹配的用户。

HTML 模板：

<template>
  <div>
    <input type="text" v-model="searchKeyword" placeholder="Search...">
    <ul>
      <li v-for="(user, index) in filteredUsers" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>

Vue 实例：

<script>
export default {
  data() {
    return {
      searchKeyword: '', // 用户输入的搜索关键词
      users: [  // 初始用户列表
        { id: 1, name: 'Alice' },
        { id: 2, name: 'Bob' },
        { id: 3, name: 'Charlie' },
        { id: 4, name: 'David' }
      ]
    };
  },
  computed: {
    filteredUsers() {
      // 使用计算属性过滤用户列表
      return this.users.filter(user => {
        return user.name.toLowerCase().includes(this.searchKeyword.toLowerCase());
      });
    }
  }
};
</script>

下面是这段代码的执行流程：

  1. 定义计算属性：在Vue实例中，我们使用computed属性定义了一个名为filteredUsers的计算属性。

  2. 计算属性逻辑：在filteredUsers计算属性中，我们使用了this.users.filter()方法。这个方法用于对this.users数组中的每个元素进行筛选，返回一个新的数组，该数组包含满足条件的元素。在这里，我们使用了箭头函数来定义filter的筛选条件。

  3. 筛选条件：我们的筛选条件是user.name.toLowerCase().includes(this.searchKeyword.toLowerCase())。这个条件首先将user.name和this.searchKeyword转换为小写字母，然后通过includes()方法检查user.name中是否包含this.searchKeyword。

  4. 动态更新：由于filteredUsers是一个计算属性，当this.searchKeyword发生变化时，Vue会自动重新计算filteredUsers，从而更新列表中显示的内容。这样就实现了根据用户输入动态过滤列表的功能。

所以这段代码通过计算属性实现了动态过滤用户列表的功能，用户可以通过输入搜索关键词来实时筛选出感兴趣的用户。

1.3.4 Vue监测数据改变的原理

当 Vue 实例创建时，会对 data 中的数据进行加工。加工的过程主要包括以下步骤：

  1. 配置 Getter 和 Setter：
    Vue 会遍历 data 中的每个属性，并为每个属性配置 getter 和 setter 方法。

  2. 代理：
    加工完成后，Vue 将 data 中的数据拷贝到 _vm.data 中，此时你可以通过 this.xxx 的方式直接访 data 中的数据，而不需要通过 _vm.data.xxx的形式。

  3. 数据监听：
    在 setter 方法中，Vue 实现了一种调用机制，当数据被修改时，会调用 setter 方法。 setter 方法中写了一个引用，这个引用能够引起模板的重新解析。

通过以上步骤，Vue 实现了数据的响应式监测，使数据变化能够自动更新相关视图，从实现了 Vue 监测数据改的原理。

在这里插入图片描述

1.3.5 Vue.set 和 this.$set 方法

Vue使用setter来实现监测对象中的数据，这意味着在创建Vue实例时就需要传入要监测的数据，对于后追加的属性，Vue默认不会做响应式处理，这意味着如果你在data中定义了一个对象，后续再给这个对象添加属性时，Vue不会自动更新相关视图。

若要让后添加的属性也具有响应式，需要使用Vue提供的API：Vue.set 和 this.$set 方法

Vue.set 和 this.$set 方法用于向响应式对象添加响应式属性，确保当属性被添加时，能够触发视图更新。

举个例子：

// 假设 student 对象在 data 中已经定义
Vue.set(this.student, 'sex', '男');//两种形式都可以
this.$set(this.student, 'sex', '男');

在这个例子中，假设 student 是一个响应式对象，我们想要添加一个新的属性 sex，并且还希望 Vue 能够监听到这属性的变化。

此时我们可以使用 Vue.set 或 .$set 方法，将sex 属性添加到 student 中，并赋予其初始值 `‘男’。此后，Vue 将会监到 sex 属性的变化，并图中进行更新。

1.3.6 数组的数据监视

如何监测数组中的数据？

通过封装数组更新元素和原生数组方法实现，其本质就是做了两件事：

（1）调用原生对应的方法对数组进行更新
（2）重新解析模板，进而更新页面

在Vue修改数组中的某个元素一定要用如下方法：

  1. 使用这些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()

这些方法已经被Vue重写，能够触发响应式更新，这些方法的本质是两步：首先调用原生数组方法对数组进行更新，然后重新解析模板，从而更新页面。

  1. Vue.set() 或 vm.$set()

另外，也可以使用Vue.set()或vm.$set()方法来修改数组中的元素。

特别注意：Vue.set() 和 vm.$set() 不能给 vm 或 vm 的根数据对象（data等）添加属性

这个限制存在的原因是：当Vue实例已经创建完成后，它的根数据对象已经被加工完毕，Vue不再允许动态地向根数据对象添加新的响应式属性。因为在实例化之后，Vue.js已经无法再对根数据对象进行监测和加工，所以在这个阶段使用Vue.set()或vm.$set()来添加属性是无效的。

ice___Cpu
关注
  • 24
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue2学习教程（图文齐全，附带gif动图更加简单易懂）
m0_54828595的博客
07-03 2万+
vue2的学习笔记，图文并茂，附带gif动图更加方便学习理解
【前端开发---Vue2】超详细的Vue2入门教程，让你的开发效率大大提高（自己整理的笔记，超详细！）
热门推荐
m0_67844671的博客
09-27 2万+
【超详细Vue2教程】超详细的Vue2入门教程，让你的开发效率大大提高（自己整理的笔记，超详细！）
Vue2保姆级教学
最新发布
lianchun_的博客
05-28 1011
0基础
vue2使用教程
el200222an的博客
04-24 1181
vue2语法相关，源自尚硅谷vue2教程
vue2 基础入门
ClearloveYt的博客
07-03 2764
目录vue 简介vue 的特性数据驱动视图双向数据绑定MVVMvue 的基本使用vue 的调试工具vue 的指令1、内容渲染指令2、属性绑定指令3、事件绑定 4、双向绑定指令 v-model5、 条件渲染指令 6 、列表渲染指令vue过滤器 定义过滤器基本使用 私有过滤器和全局过滤器过滤器的注意点watch 侦听器使用 watch 检测用户名是否可用 侦听器的格式对象侦听器deep 选项 计算属性计算属性的特点vue-cli 的使用 安装和使用vue 项目中 src 目录的构成：vue 项目的运行流程 vu
Vue2.0教程
qq_57404736的博客
04-28 5197
一、Vue入门 1、概述 ​ 在众多的语言排名中，JavaScript 已经非常靠前，它是前端的核心编程语言，我们可以利用 js 开发 动态 效果的网页，也可以开发 app，为了简化 JavaScript 的使用，在其基础上，发展出两个门派： 真实 DOM 操作的 jQuery 门派，例如：bootstrap、layui、easyui 都使用了 jQuery 技术。 虚拟 DOM 操作门派，复杂的如 angular.js ，简单的国产框架 我们以虚拟 DOM 操作的 vue.js 为例它有以下优点：
vue-live2d:vue live2d招牌女孩（演示
05-04
vue-live2dvue 看板娘可直接在 vue 项目中直接引用此包，即可应用看板娘，目前包含不少功能配置。一、使用1. 在线浏览个人网站应用访问速度快：使用示例部署在 github 上:2. 项目引入npm install vue-live2d// 在...
vue-mobx:Vuejs 2的Mobx绑定
05-16
安装使用npm安装pkg： npm install vue-mobx --save或纱线 yarn add vue-mobx或凉亭 bower install vue-mobx用法显然，它适用于Mobx和Vuejs，可通过NPM安装： npm i --save mobx vue vue-mobx ：1.安装vue-mobx插件...
vue-select2:Vue中的select2组件
05-05
Vue-Select2-Component基于以下插件和libs（version）： 如何使用 安装 // npm install npm install v-select2-component --save 用作组件 导入为全局组件。 // import Select2Component import Select2 from 'v-...
vue-pagination-2:Vue.js 2分页组件
05-02
import Pagination from 'vue-pagination-2'; 脚本标签 在dist/vue-pagination-2.min.js下获取缩小版本。 它将导出全局Pagination变量。 用法 在全局或本地注册组件： Vue . component ( 'pagination' , ...
vue-jsonschema-form:vue2的JSON模式表单生成器
05-12
vue-jsonschema-form [WIP：未准备好] 基于JSON模式表单生成器 概述 该项目的目的是创建一个简单的Vue组件，该组件能够根据构建HTML表单，并且默认情况下使用语义。 入门 克隆此存储库，安装依赖项并使用dev命令...
vue2+vue3小白零基础教程—vue2篇，全网2021最详细教程
lvyuanxiang的博客
09-23 4742
vue教程 1. Vue核心 1.1 Vue简介 1.1.1 Vue是什么 一套用于构建用户界面的渐进式JavaScript框架 渐进式：Vue可以自底向上逐层的应用 简单应用：只需一个轻量小巧的核心库 复杂应用：可以引入各式各样的Vue插件 1.1.2 谁开发的 1.1.3 Vue的特点 采用组件化模式，提高代码复用率、且让代码更好维护。 声明式编码,让编码人员无需直接操作DOM,提高开发效率。 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点 1.2 Vue快速体验
Vue2的基本使用
折耳根的羹
03-07 924
vue的基本使用
Vue基础之指令与过滤器
fanlingfang的博客
11-06 617
ES6模块化 ES6模块化规范是浏览器端与服务器端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学习成本，开发者不需再额外学习AMD、CMD或CommonJS等模块化规范。 ES6模块化规范中定义: 每个js文件都是一个独立的模块 导入其它模块成员使用import 关键字 向外共享模块成员使用export关键字 p230 Promise async/await EventLoop 宏任务和微任务 API接口案例 前端工程化 实际的前端开发: 模块化(js的模块化、css的模块化、资源的模
Vue.js2.0入门详细教程
sucre_smile的博客
04-08 7086
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 入门实例步骤： node.js环境（npm包管理器） vue-cli...
Vue2基础教程(脚手架版)
qq_57319760的博客
09-14 3113
本文讲解使用Vue脚手架进行Vue2学习，适合学习完一遍vue2基础的人进行复习
vue2理论学习（全套教程，包含vuex、路由等）
ailsa_csdn的博客
02-27 4377
本文是学习vue2理论的记录笔记，适合于入门学习，包含vue全家桶中的vuex、路由等理论知识。
vue2安装教程
m0_69691363的博客
07-11 4418
1. 首先先检查node.js是否安装打开命令提示符，里管理员身份运行 命令提示符可以按win+R或输入cmd打开后输入node -v 查看电脑是否，以及版本号我这里显示v16.20.1 就是已经安装了node。如果没有就点击官网下载下载的时候可以看到下载的版本3.配置环境下载完成后，双击安装包，开始安装，使用默认配置安装一直点next即可，安装路径默认在下，也可以自定义修改最后点击finish，完成安装然后在cmd中查看安装版本二、Vue和脚手架安装1.安装vue.js。
【VUE2】VUE2基础知识和原理--超详细--超简介--零基础（一）
m0_55644132的博客
12-02 4881
2 模板语法 Vue模板语法有2大类:插值语法：功能：用于解析标签体内容写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性指令语法:功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）举例：v-bind:href=“xxx” 或 简写为 :href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性 3 数据绑定 Vue中有2种数据绑定的方式：单向绑定(v-bind)：数据只能从data流向页面双向绑定(v-model)：数据不仅能从data流向页
实战Vue.js 2.x：Vuex、vue-router构建复杂SPA
7. **vue-router路由**：掌握vue-router的用法，它允许你创建应用的路由结构和URL，学习动态加载组件和基于URL的数据。 8. **电子商务应用**：通过构建产品目录和动态购物车，了解如何使用vue-router和Vuex构建电子...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

ice___Cpu

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

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

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

打赏作者

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

抵扣说明：

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

余额充值