vue内置组件的使用

最新推荐文章于 2024-05-07 23:53:03 发布
最新推荐文章于 2024-05-07 23:53:03 发布
阅读量702 收藏 2
点赞数
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42681295/article/details/108318622
版权

内置组件的使用

引用vue官网中内置组件，点我去官网

component

Props：
is - string | ComponentDefinition | ComponentConstructor
inline-template - boolean

用法：

渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。

<!-- 动态组件由 vm 实例的属性值 `componentId` 控制 -->
<component :is="componentId"></component>

<!-- 也能够渲染注册过的组件或 prop 传入的组件 -->
<component :is="$options.components.child"></component>

其中component又叫动态组件，属性中 is 指定渲染的组件。

代码解释如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
  <script src="../js/vue.js"></script>
</head>

<body>
  <!--  1、
  <div id="app">
    <com-a></com-a>
    <com-b></com-b>
    -----------------
    <component is="comA"></component>
    <component is="comB"></component>
  </div> -->
  
  <!--2、-->
  <div id="app">
    <ul class="nav nav-tabs">
      <!-- 这里的item是是数组中的每一个对象 例如 {  name: 'fqniu', container: '吃美食' } -->
      <li class="nav-item" v-for="(item,idx) in tablist" v-on:click="changeTab(item)">
        <!-- 这里的class判断是否comNum等于item.name, 如果相等 则样式为 active -->
        <a class="nav-link" href="#" v-bind:class="{active:comNum===item.name}">{{ item.name }}--{{idx}}</a>
      </li>
    </ul>
    <div class="container p-3">
    <!-- 动态组件的使用-->
      <component :is="comNum"></component>
    </div>
  </div>

  <script>
    // 1、第一种 直接使用 component 
    // const vm = new Vue({
    //   el: '#app',
    //   components: {
    //     comA: {
    //       name: 'comA',
    //       template: `<div>comA</div>`
    //     },
    //     comB: {
    //       name: 'comB',
    //       template: `<div>comB</div>`
    //     }
    //   }
    // })

    // 2、
    // 点击tab栏切换内容 通过点击时 切换不同的组件 comNum 
    // 进而改变tab栏选项对应的内容 
    const vm = new Vue({
      el: '#app',
      data: {
        tablist: [{
          name: 'fqniu',
          container: '吃美食'
        }, {
          name: 'niuniu',
          container: '学游泳'
        }, {
          name: 'erniu',
          container: '宅屋看书'
        }, {
          name: 'shaniu',
          container: '敲代码'
        }],
        comNum: 'fqniu'
      },

      methods: {
        changeTab(item) {
          this.comNum = item.name
        }
      },
      created() {
        this.tablist.forEach(item => {
          Vue.component(item.name, {
            template: `<div>${item.container}</div>`
          })
        });
      }
    })

  </script>
</body>

</html>

keep-alive

Props：

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。

用法：

< keep-alive > 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 < transition> 相似，< keep-alive > 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。

当组件在 < keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

在 2.2.0 及其更高版本中，activated 和 deactivated 将会在 < keep-alive> 树内的所有嵌套组件中触发。

主要用于保留组件状态或避免重新渲染。

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>

<!-- 多个条件判断的子组件 -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>

<!-- 和 `<transition>` 一起使用 -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

注意，< keep-alive > 是用在其一个直属的子组件被开关的情形。如果你在其中有 v-for 则不会工作。如果有上述的多个条件性的子元素，< keep-alive> 要求同时只有一个子元素被渲染。

2.1.0 新增 include and exclude

include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

2.5.0 新增 max

最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

<keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>

< keep-alive> 不会在函数式组件中正常工作，因为它们没有缓存实例。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id="app">
    <ul class="nav nav-tabs">
      <li class="nav-item" v-for="(item,idx) in tablist" v-on:click="changeTab(item)">
        <a class="nav-link" href="#" v-bind:class="{active:comNum===item.name}">{{ item.name }}--{{idx}}</a>
      </li>
    </ul>
    <div class="container p-3">
      <keep-alive>
        <!-- 缓存组件 保留组件状态 避免重新渲染 -->
       <component :is="comNum"></component>
      </keep-alive>
     
    </div>
  </div>

  <script>

    // 点击tab栏切换内容 上一个内容里面的数据还存在，并没有销毁
    const vm = new Vue({
      el: '#app',
      data: {
        tablist: [{
          name: 'fqniu',
          container: '吃美食'
        }, {
          name: 'niuniu',
          container: '学游泳'
        }, {
          name: 'erniu',
          container: '宅屋看书'
        }, {
          name: 'shaniu',
          container: '敲代码'
        }],
        comNum: 'fqniu'
      },

      methods: {
        changeTab(item) {
          this.comNum = item.name
        }
      },
      created() {
        this.tablist.forEach(item => {
          Vue.component(item.name, {
            data() {
              return {
                num: 1
              }
            },
            methods: {
              change() {
                this.num++
              }
            },
            created() {
              console.log('created', item)
            },
            distoryed() {
              console.log('distory', item)
            },
            template: `<div>${item.container}
            <button @click="change">这是点击增加的{{num}}</button>
            </div>`
          })
        });
      }
    })

  </script>
</body>

</html>

  • <keep-alive> 缓存组件

    把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染可以添加一个 keep-alive
    包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们，主要用于保留组件状态或避免重新渲染

    • include（String/Regexp） ： 指定缓存组件名
    • exclude（String/Regexp） ： 指定不缓存的组件名
   <!-- 代表 xxx, yyy 下的组件被缓存 这里的 xxx 和 yyy 是组件名 该大写的大写 必须一致-->
  <keep-alive include="xxx,yyy">
     <component v-bind:is="currentTabComponent"></component>
  </keep-alive>

slot

Props：

name - string，用于命名插槽。

Usage：

< slot> 元素作为组件模板之中的内容分发插槽。< slot> 元素自身将被替换。

<!-- 1、具名插槽 -->
<base-layout>
  <template v-slot:header>
    Header content
  </template>

  Default slot content

  <template v-slot:footer>
    Footer content
  </template>
</base-layout>

<!-- 2、接收 prop 的具名插槽 -->
<infinite-scroll>
  <template v-slot:item="slotProps">
    <div class="item">
      {{ slotProps.item.text }}
    </div>
  </template>
</infinite-scroll>

<!-- 3、接收 prop 的默认插槽，使用了解构 -->
<mouse-position v-slot="{ x, y }">
  Mouse position: {{ x }}, {{ y }}
</mouse-position>

利用组件内容进行通讯（父->子）

在组件模板中利用内置组件<slot></slot>来承载组件内容,否则它的内容都会被忽略（被模板内容覆盖）

  • 默认插槽default

    
  <!-- 使用组件 -->
  <nav-link url="/home">首页</nav-link>

  <!-- 定义组件 -->
  <script>
    Vue.component('nav-link',{
      props:['url']
      //以下template写法，组件内容“首页”，会被template的内容覆盖掉，
      //最终解析为：<a href="/home"><span>Home</span></a>
      //template:`<a :href="url"><span>Home</span></a>`

      // 解决方案：可以用<slot></slot>保留内容和设置默认值
      // 最终解析为：<a href="/home">首页<span>Home</span></a>
      template:`<a :href="url"><slot></slot><span>Home</span></a>`
    });
  </script>

  • 具名插槽：

    • 模板内容：给<slot/>组件命名（设置name属性）
    • 组件内容：设置slot属性，实现内容精准显示到模板具体位置

    Vue2.6+已经废除slot属性，改成v-slot:name（只能用在template元素或组件上）


  <!-- 组件模板内容 -->
  <template id="myTest">
    <div>
      <slot name="header">这是拥有命名的slot的默认内容</slot>
      <slot>这是拥有命名的slot的默认内容</slot>
      <slot name="footer">这是拥有命名的slot的默认内容</slot>
    </div>
  </template>

  <!-- 使用组件 -->
  <my-component>
    <span slot="header">这里的内容显示到name为header的插槽</span>
    <span>这里的内容显示到默认插槽</span>
    <span slot="footer">这里的内容显示到name为footer的插槽</span>
  </my-component>

  <!-- Vue2.6+用法 -->
  <my-component>
    <template v-slot:header>这里的内容显示到name为header的插槽</template>
    <span>这里的内容显示到默认插槽</span>
    <template v-slot:footer>这里的内容显示到name为footer的插槽</template>
  </my-component>

作用域插槽（子- >父）

Vue编译规则：父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译

利用作用域插槽(slot-scope)实现把组件模板template中的数据传到组件内容中处理，实现特殊定制（PS：Vue2.6+已废除该属性，改为v-slot:name格式，简写：#name）


  <!-- mynav组件模板 -->
  <div class="box">
    <slot :msg="msg" :username="username">{{username}}，{{msg}}</slot>
    <slot name="footer" title="播放器" :player="player">{{player}}</slot>
  </div>

  <!-- 组件内容 -->
  <mynav>
    <!-- props为传过来的数据组成的对象 -->
    <div slot-scope="props">{{props.msg}}，{{props.username}}</div>

    <!-- Vue2.6+用法 -->
    <div v-slot:default="props">{{props.msg}}，{{props.username}}</div>
    <div v-slot:footer="foot">{{foot.title}}，{{foot.player}}</div>
  </mynav>

transition 和 transition-group

过渡动画

  • <transition>
  • <transition-group>

<transition>用于单个元素动画，<transition-group>用于多个元素并解析为一个标签（默认:span）

属性

  • name : 过渡类名前缀（默认：v）

    如设置name=“fade”，过渡类名变成：fade-enter / fade-enter-active / fade-leave / fade-leave-active

  • css : boolean，是否使用 CSS 过渡类（默认：true）。设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。

  • 自定义过渡类名（可配合animate.css框架实现过渡效果）

    • enter-class
    • enter-active-class
    • enter-to-class
    • leave-class
    • leave-active-class
    • leave-to-class
      <transition
    enter-active-class="bounceIn"
    leave-active-class="bounceOut"
  >
  </transition>

触发动画场景

Vue会自动检测是否设置css动画或JavaScript钩子，并在下列情形中添加进入/离开过渡效果（css过渡或javascript过渡）

  • 条件渲染 (使用 v-if)
  • 条件展示 (使用 v-show)
  • 动态组件
  • 组件根节点

CSS过渡

  • 通过CSS过渡类名

    组件过渡过程中，默认会有四个CSS类名自动进行切换，会有如下四个CSS类名：

    • v-enter：进入过渡的开始状态，元素被插入时生效，只应用一帧后立即删除；
    • v-enter-active：进入过渡的结束状态，元素被插入时就生效，在过渡过程完成之后移除；
    • v-leave：离开过渡的开始状态，元素被删除时触发，只应用一帧后立即删除；
    • v-leave-active：离开过渡的结束状态，元素被删除时生效，离开过渡完成之后被删除；

在这里插入图片描述

JavaScript过渡

通过内置事件实现过渡动画效果，可以利用第三方动画库（如：velocity.js,jquery等）实现动画效果

    <transition
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:after-enter="afterEnter"
      v-on:enter-cancelled="enterCancelled"
      v-on:before-leave="beforeLeave"
      v-on:leave="leave"
      v-on:after-leave="afterLeave"
      v-on:leave-cancelled="leaveCancelled"
    >
    </transition>

    methods: {
      // 过渡进入
      // 设置过渡进入之前的组件状态
      beforeEnter: function (el) {
        // ...
      },
      // 设置过渡进入完成时的组件状态
      enter: function (el, done) {
        // ...
        done()
      },
      // 设置过渡进入完成之后的组件状态
      afterEnter: function (el) {
        // ...
      },
      enterCancelled: function (el) {
        // ...
      },
      // 过渡离开
      // 设置过渡离开之前的组件状态
      beforeLeave: function (el) {
        // ...
      },
      // 设置过渡离开完成时地组件状态
      leave: function (el, done) {
        // ...
        done()
      },
      // 设置过渡离开完成之后的组件状态
      afterLeave: function (el) {
        // ...
      },
      // leaveCancelled 只用于 v-show 中
      leaveCancelled: function (el) {
        // ...
      }
    }

代码解释如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
  <script src="../js/vue.js"></script>
  <style>
    /* 1、默认 v */
    /*.v-enter,
    .v-leave-to {
      opacity: 0;
      transition: all 1s;
    }

    .v-enter-to,
    .v-leave {
      opacity: 1;
      transition: all 1s;
    } */
    
    /* 2、标签中添加一个name属性，然后把类名中v改成你定义的类名 */
    .my-enter,
    .my-leave-to {
      opacity: 0;
      transition: all 1s;
    }

    .my-enter-to,
    .my-leave {
      opacity: 1;
      transition: all 1s;
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- 1、动画效果 -->
    <!-- <button @click="tag">点我看效果</button>
    <transition>
      <div v-if="flag">我是div，会消失和隐藏</div>
    </transition> -->

    <!-- 2、动画效果 -->
    <button @click="tag">点我看效果</button>
    <!-- 需要在transition标签上添加一个name属性，然后把类名中v改成你定义的类名, 比如my -->
    <transition name="my">
      <div v-if="flag">我是div，会消失和隐藏</div>
    </transition>

  </div>

  <script>
    // 点击反转flag的值
    const vm = new Vue({
      el: '#app',
      data: {
        flag: true
      },
      methods: {
        tag() {
          this.flag = !this.flag
        }
      }
    })

  </script>
</body>

</html>

注意点

以上内置组件不会产生具体的html结构；

牛先森家的牛奶
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈Vue内置component组件的应用场景
08-27
主要介绍了浅谈Vue内置component组件的应用场景，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue 自定义 select内置组件
10-18
在Vue中，经常需要对内置组件进行自定义以满足特定需求。本示例介绍如何在Vue中自定义`select`组件，并整合第三方jQuery插件`select2`以实现更丰富的选择器功能。 1. **整合第三方jQuery插件(select2)** `select2`...
Vue-内置的组件
LS
04-17 494
component transition transition-group keep-alive slot <template> <div> <div> <a @click="changeType('Animal')">动物</a> <a @click="changeType('Plan...
前端学习-Vue内置组件
最新发布
2401_84094868的博客
05-07 221
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
vue component 内置组件
从入门到放弃的博客
10-16 762
https://blog.csdn.net/weixin_42333548/article/details/80532919?utm_source=blogxgwz0
Vue内置组件
JustinNeil的博客
08-25 1252
Vue内置组件componenttransitiontransition-groupkeep-aliveinclude and excludemaxslot component Props： is - string | ComponentDefinition | ComponentConstructor inline-template - boolean 用法：渲染一个“元组件”为动态组件...
Vue 的内置组件- component
qq_41302594的博客
04-03 809
Vue 的内置组件 - component 一、学习的原因 一开始学习 Vue.js 的时候，经常将用于表示组件内容的 components 选项写成 component，然后导致发生错误，有一段时间才能检查出来，所以，这次将 component 这个内置组件弄出来单独作一个学习，依次为戒。 二、什么是 component 内置组件 官方解释为：渲染一个“元组件”为动态组件。依 is 的值，来决定...
vue内置组件component--通过is属性动态渲染组件操作
10-15
在Vue中，`<component>` 是一个内置的特殊组件，用于动态地渲染其他组件。本文将深入讲解如何通过 `is` 属性来实现动态组件渲染。 `<component>` 组件的 `is` 属性允许我们动态地改变渲染的组件类型。在给定的代码...
通过npm引用的vue组件使用详解
08-31
在master.vue中，利用Vue的内置组件`<component>`来动态加载内部组件，这样可以灵活地插入不同的内容。`<component>`组件的`:is`属性用来指定要渲染的组件名或组件选项。 ```html <component :is="comp"></...
vue内置组件transition简单原理图文详解(小结)
10-18
主要介绍了vue内置组件transition简单原理图文详解(小结),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
内置组件：component
过客如期的博客
02-22 849
1.是一个用于渲染动态组件或元素的“元组件”。
微信小程序 slot踩坑的解决
01-03
今天在使用微信小程序 component 里的 slot 时发现，当只用一个 slot 并且将 slot 命名后，页面中调用这个 slot 并不会加载进来。 研究尝试后发现，如果想要使用命名的方式调用单个 slot ，也需要像调用多个 slot 的方式 在 component/xxx.js 里开启多个 slot 的功能。下面看代码。 // component 哈哈哈哈哈哈哈哈 // index 页面 <!-- 这部分内容将被放置在
Vue的内置指令
Fairy的博客
05-28 338
1，基本指令： v-cloak：不需要表达式，会在vue实例结束编译时从绑定的HTML元素上移除，经常和CSS中的display：none连用； 解决初始化慢，导致的页面闪动； v-once：不需要表达式，定义他的元素或者组件只渲染一次；首次渲染后，不在随数据变化而重新渲染； 2，条件渲染指令： v-if，v-else-if, v-else:表达式为真时，渲...
Vue-组件&&单文件组件&&组件的属性&&属性传值&&CSS局部样式
qq_56973906的博客
09-05 584
# 组件是什么组件是可复用的 Vue 实例,主要用于开发中 具有相同特征不同数据的模块 把它集成为一个组件 供重复利用 # 全局组件**规则：**- 组件的属性不能用大写字母- 组件的名字可以用驼峰命名法,但是使用的时候必须用连字符- 全局注册的组件使用时不能使用单标签(不会报错,但是只能使用一次 多次使用只显示第一个)- 注册的组件不要跟系统标签同名 # 局部组件 一个vm实例可以有多个局部组件,但是只能供当前vm实例使用 # 单文件组件 vue中的单文件组件是以.vue扩展名结尾的文件，在这个文件中封
vue——全局/局部组件、单文件组件、组件的属性、全局样式、局部样式
qq_56668869的博客
09-05 1634
全局/局部组件、单文件组件、组件的属性、全局样式、局部样式、组件基础面试题
Vue 3.0 内置组件
2201_75866484的博客
04-02 1171
请注意，这将移动实际的 DOM 节点，而不是被销毁和重新创建，并且它还将保持任何组件实例的活动状态。当一个子节点被更新，从屏幕上的位置发生变化，它会被应用一个移动中的 CSS 类 (通过。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
Vue的todolist示例
Guoye的专栏
09-09 295
下面基于Vue写的Todolist示例 涉及到Vue的知识点有 创建组件和组件的使用 单文件组件 子组件 自定义组件使用v-modal 循环指令v-for 条件指令v-if 子组件向父组件通信 主页 App.vue <template> <div id="app"> <h1>My Todo App!</h1> <TodoList/> </div> </template> <script> im
vue 内置组件 component 的用法
热门推荐
weixin_42333548的博客
06-01 9万+
component is 内置组件切换方法一： component组件（单独拿出一个组件来专门进行切换使用） 使用is来绑定你的组件：如下面的reviewedPlan planDetailsList attachmentList等引入的组件名 changeViewFun 是用来切换组件的方法 通过给is绑定的currentView来实现切换组件 pathUrl就是当前的路由 ...
【Vue】组件（component）
✈ 正在努力 の 寒江（StudiousTiger) ✌ 呐 ✈
07-13 7408
文章目录一、什么是组件二、为什么需要组件三、创建一个组件四、组件的复用五、通过 Prop 向子组件传递数据六、通过插槽分发内容七、动态组件八、注意事项 一、什么是组件 所谓的组件，其实就是我们通过vue自定义的一些标签。在自定义的标签中，其实已经封装好了一些自定义的特定的HTML代码。 你也许会疑问，为什么要特意的将HTML代码封装起来。其实是这样的，我们使用组件一方面可以减少HTML的代码（视觉上是这样的），另一方面可以极大的提高代码的复用。 你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它
vue内置组件component,react用什么替代
05-13
在 React 中，可以使用动态渲染来达到类似 Vue 中使用内置组件 Component 的效果。具体来说，可以使用 React.createElement 函数来动态创建组件并渲染。 例如，假设我们有一个变量 Component，它存储了要渲染的组件...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值