vue学习笔记(五)条件渲染和列表渲染

最新推荐文章于 2022-12-02 09:02:40 发布
最新推荐文章于 2022-12-02 09:02:40 发布
阅读量244 收藏
点赞数
分类专栏： vue系列
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43655374/article/details/104011571
版权

前言

在众多的编程语言中，我们的基础语法总是少不了一些专业语法，比如像定义变量，条件语句，for循环，数组，函数等等，vue.js这个优秀的前端框架中也有同样的语法，我们换一个名词，将条件语句改成专业词汇叫做条件渲染，循环语句改成专业词汇叫做列表渲染，这样比较舒服一点。

本章目标

  • 学会条件渲染的使用
  • 学会可复用的key的使用
  • 学会列表渲染的使用

条件渲染

1.v-if的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app01">
    <span v-if="type==='A'">成绩为A</span>
</div>
<script src="../js/vue.js"></script>
<script>
    let vm=new Vue({
        el:'#app01',
        data:{
            type:'A'
        },
        methods:{
            
        },
        watch:{
            
        },
        computed:{
            
        }
    })
</script>
</body>
</html>

结果：成绩为A
v-if判断条件是否相等，就像if一样，如果相等，那么值就会为真(true)。

与之对应的还有v-else、v-else-if。

2.v-else的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app01">
    <span v-if="type==='A'">成绩为A</span>
    <span v-else>成绩为B</span>
</div>
<script src="../js/vue.js"></script>
<script>
    let vm=new Vue({
        el:'#app01',    
        data:{
            type:'B'
        },
        methods:{
            
        },
        watch:{
            
        },
        computed:{
            
        }
    })
</script>
</body>
</html>

结果：成绩为B

小练习

现在做一个小练习，巩固一下v-if和v-else的使用，需求如下：点击一个按钮时,按钮上的文字变为显示，再次点击时按钮上的文字变为隐藏，当按钮上的文字显示隐藏时，显示红色，按钮上的文字变为显示时显示蓝色。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 100px;
                height: 100px;
            }
            .red{
                background: red;
            }
            .blue{
                background: blue;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <button @click="handleClick">{{text}}</button>
            <div v-if="show" class="box red"></div>
            <div v-else class="blue box"></div>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    show:true,
                    text:'隐藏'
                },
                methods:{
                    handleClick(){
                        this.show=!this.show;
                        this.text=this.show?'隐藏':'显示'
                    }
                }
            })
            
        </script>
    </body>
</html>

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

3.v-else-if的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app01">
    <input type="text" v-model="type"/>
    <div v-if="type==='A'">成绩为A</div>
    <div v-else-if="type==='B'">成绩为B</div>
    <div v-else-if="type==='C'">成绩为C</div>
    <div v-else>不及格</div>
</div>
<script src="../js/vue.js"></script>
<script>
    let vm=new Vue({
        el:'#app01',    
        data:{
            type:''
        },
        methods:{
            
        },
        watch:{
            
        },
        computed:{
            
        }
    })
</script>
</body>
</html>

结果:
在这里插入图片描述
在这里插入图片描述

4.v-show

说起这个v-show，其实和v-if有与曲同工的妙处，但是又有不同的地方，我们来看下示例你就秒懂了。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 100px;
                height: 100px;
            }
            .red{
                background: red;
            }
            .blue{
                background: blue;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div v-show="show" class="box red"></div>
            <button @click="handleClick()">{{text}}</button>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    show:true,
                    text:'隐藏',
                },
                methods:{
                    handleClick(){
                        this.show=!this.show;
                        this.text=this.show?'隐藏':'显示'
                    }
                },
                computed:{
                    
                }
            })
        </script>
    </body>
</html>

在这里插入图片描述
当按钮变为显示的时候，背景颜色消失，这里就不截图了，有兴趣的小伙伴可以自己去尝试，既然v-if可以帮我们实现元素的显示和隐藏，那我们还需要v-show干什么呢？不妨看下接下来的实例。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 100px;
                height: 100px;
            }
            .red{
                background: red;
            }
            .blue{
                background: blue;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div v-show="show" class="box red"></div>
            <div class="box blue" v-if="show"></div>
            <button @click="handleClick()">{{text}}</button>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    show:true,
                    text:'隐藏',
                },
                methods:{
                    handleClick(){
                        this.show=!this.show;
                        this.text=this.show?'隐藏':'显示'
                    }
                },
                computed:{
                    
                }
            })
        </script>
    </body>
</html>

在这里插入图片描述
当我们点击按钮的时候
在这里插入图片描述
现在结果已经出来了，使用v-show的dom元素，dom元素只是简单的切换display属性，而v-if会将dom元素移除，当我们再次点击时，v-if又会重新渲染元素，可想而知如果频繁的切换的话，那么有多么的耗费性能，因此我总结了如下几点。

  • 频繁的切换显示/隐藏要使用v-show
  • 只判断一次时，使用v-if

5.减少dom的生成

我们都知道js操作dom元素是非常消耗性能的，但是我们需要尽量的避免这个问题，vue中为我们提供了一个template标签，这个标签叫做模板(至于什么叫做模板，后期的博客会讲到)，我们先看一个示例。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 100px;
                height: 100px;
            }
            .red{
                background: red;
            }
            .blue{
                background: blue;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div v-if="show">
                <div class="box red"></div>
                <div class="box blue"></div>
            </div>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    show:true,
                },
                methods:{
                    
                },
                computed:{
                    
                }
            })
        </script>
    </body>
</html>

在这里插入图片描述
我们想让图上的那个div消失，不想为了管理同一组元素而多生成一个节点，这样是非常消耗性能的，我们将div标签变成template标签。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           .box{
               width: 100px;
               height: 100px;
           }
           .red{
               background: red;
           }
           .blue{
               background: blue;
           }
       </style>
   </head>
   <body>
       <div id="app">
           <div v-if="show">
               <div class="box red"></div>
               <div class="box blue"></div>
           </div>
           <template v-if="show">
               <div class="box red"></div>
               <div class="box blue"></div>
           </template>
       </div>
       <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript">
           let vm=new Vue({
               el:'#app',
               data:{
                   show:true,
               },
               methods:{
                   
               },
               computed:{
                   
               }
           })
       </script>
   </body>
</html>

在这里插入图片描述
现在我有心中萌生了一个想法，v-if可以使用template,那么v-show是否可以使用呢？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 100px;
                height: 100px;
            }
            .red{
                background: red;
            }
            .blue{
                background: blue;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <template v-if="show">
                <div class="box red"></div>
                <div class="box blue"></div>
            </template>
            <template v-show="show">
                <div class="box red"></div>
                <div class="box blue"></div>
            </template>
            <button @click="handleClick()">{{text}}</button>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    show:true,
                    text:'隐藏',
                },
                methods:{
                    handleClick(){
                        this.show=!this.show;
                        this.text=this.show?'隐藏':'显示'
                    }
                },
                computed:{
                    
                }
            })
        </script>
    </body>
</html>

在这里插入图片描述
在这里插入图片描述
答案是v-if可以使用template，而v-show不能使用template。

vue中用key管理可复用的元素

vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换。
示例一：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title></title>
</head>
<body>
<div id="app01">
   <template v-if="type==='username'">
       <label>用户名</label>
       <input type="text" placeholder="请输入您的账号" />
   </template>
   <template v-else>
       <label>邮箱</label>
       <input type="text" placeholder="请输入您的邮箱" />
   </template>
   <p>
       <a href=""@click.prevent="type='username'">用户名登录</a>|
       <a href=""@click.prevent="type='email'">邮箱登录</a>
   </p>
</div>
<script src="../js/vue.js"></script>
<script>
   let vm=new Vue({
       el:'#app01',    
       data:{
           isShow:true,
           type:'username'
       },
       methods:{
           
       },
       watch:{
           
       },
       computed:{
           
       }
   })
</script>
</body>
</html>

结果：
在这里插入图片描述
在这里插入图片描述
当我们在用户名登录和邮箱切换的时候，我们发现我们输入的内容始终保持，为什么呢?总的来说，因为两个模板使用了相同的元素，input不会被替换掉——仅仅是替换了它的 placeholder属性，这样也不总是符合实际需求，所以 vue 为你提供了一种方式来表达这两个元素是完全独立的，不要复用它们,只需添加一个具有唯一值的key属性即可。

示例二:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app01">
    <template v-if="type==='username'">
        <label>用户名:</label>
        <input type="text" placeholder="请输入您的用户名"  key='usename'/>
    </template>
    <template v-else>
        <label>邮箱:</label>
        <input type="text" placeholder="请输入您的邮箱"  key='email'/>
    </template>
    <p>
        <a href=""@click.prevent="type='username'">用户名登录</a>|
        <a href=""@click.prevent="type='email'">邮箱登录</a>
    </p>
</div>
<script src="../js/vue.js"></script>
<script>
    let vm=new Vue({
        el:'#app01',    
        data:{
            isShow:true,
            type:'username'
        },
        methods:{
            
        },
        watch:{
            
        },
        computed:{
            
        }
    })
</script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
现在我们点击切换的时候，输入框都会重新渲染，当然我们的

列表渲染

我们用v-for指令根据一组数组的选项列表进行渲染，v-for指令需要以item in items的形式的特殊语法，items是原数据数组并且item是元素迭代的别名。

1.v-for的基本使用

语法：(item,index) in|of items

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-for的基本使用</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="(item) in arr">{{item}}</li>
            </ul>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    arr:['apple','banana','pear']
                },
                methods:{
                    
                },
                computed:{
                    
                }
            })
        </script>
    </body>
</html>

结果：

当然v-for中也可以带第二个参数index。

2.v-for中带索引
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-for的基本使用</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="(item,index) in arr">{{item}}--{{index}}</li>
            </ul>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    arr:['apple','banana','pear']
                },
                methods:{
                    
                },
                computed:{
                    
                }
            })
        </script>
    </body>
</html>

在这里插入图片描述

3.v-for迭代字符串
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-for的基本使用</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="(item,index) in arr">{{item}}--{{index}}</li>
            </ul>
            <ul>
                <li v-for="item in 'helloworld'">{{item}}</li>
            </ul>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    arr:['apple','banana','pear']
                },
                methods:{
                    
                },
                computed:{
                    
                }
            })
        </script>
    </body>
</html>

在这里插入图片描述

4.v-for迭代对象

语法：(value,key,index) of | in items

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-for迭代对象</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="(value,key,index) of obj">{{value}}-{{key}}-{{index}}</li>
            </ul>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    obj:{
                        name:'kk',
                        age:18,
                        sex:'male'
                    }
                },
                methods:{
                    
                },
                computed:{
                    
                }
            })
        </script>
    </body>
</html>

在这里插入图片描述

5.v-for迭代整数
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-for迭代对象</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="(value,key,index) of obj">{{value}}-{{key}}-{{index}}</li>
            </ul>
            <ul>
                <li v-for="item in 10">{{item}}</li>
            </ul>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    obj:{
                        name:'kk',
                        age:18,
                        sex:'male'
                    }
                },
                methods:{
                    
                },
                computed:{
                    
                }
            })
        </script>
    </body>
</html>

结果：

在这里插入图片描述
注意：但我们迭代整数的时候，item从1开始而不是从0开始。

总结

在本章内容中，我们一共学习了三个知识点，分别是条件渲染的使用(v-if,v-else,v-else-if),管理可复用的key,列表渲染(v-for的基本使用等等)，本章的内容也多但是在实际应用上非常广泛，毕竟这些是非常基础的语法，基础不牢，地动山摇，学习任何东西都需要自己一步一个脚印走出来。

十四亿少女梦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入理解Vue 的条件渲染和列表渲染
08-29
本篇文章主要介绍了深入理解Vue 的条件渲染和列表渲染，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue3学习（十二）--- 自定义指令
最新发布
邱先生的博客
10-26 321
必须以的形式来命名本地自定义指令，以使得它们可以直接在模板中使用。<template>show">开关{{show}} ----- {{title}}</button>console.log("初始化====>");},// 在元素上做些操作console.log("初始化一次=======>");},console.log("初始化========>");},console.log("更新之前");},console.log("更新结束");},
Vue系列之v-for循环结构
老__L的博客
12-02 1554
v-for循环结构
2020-11-20
qq_43990357的博客
11-20 4433
（一）黑马vue快速入门自学笔记 02.vue基础-简介 1.javascript框架 2.简化Dom操作 3.响应式数据驱动` 03.vue基础-第一个vue程序 1.文档传送门：https://cn.vuejs.org 2.步骤 （1）导入开发版本的vue.js； （2）创建Vue实例对象，设置el属性和data属性； （3）使用简洁的模板语法把数据渲染到页面上 <body> <div id="app"> {{message}} </div
Vue基本指令
Dimuzero的博客
04-28 702
1.v-cloak 解决插值表达式闪烁问题 <style> [v-cloak] { display: none; } </style> v-text，v-html和{{}}的区别： {{}}渲染界面会有闪烁问题，但是v-text，v-html不存在 2 v-text 1.v-text指令的作用：设置标签的内容 2.默认写法会替换全部内容，使用**插值表达式{{}}**可以替换指定内容 3.内部支持写表达式（字符串拼接） 3 v-html 1.v-htm.
Vue（初识一）
daai5201314的博客
05-24 215
1. Vue是什么 Vue.js（/vjuː/，或简称为Vue）是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架，旨在更好地组织与简化Web开发。 目前前端 必备 技能 传统方式已经不能适应目前越来越 复杂 的开发需求 用vue的开发方式会简单、高效 三大框架(vue、react、angular) 2. Vue能做什么 Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。 通俗的来讲，vue就是
学习vue.js条件渲染
10-20
主要和大家一起学习vue.js条件渲染，代码注释详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue服务器渲染Nuxt学习笔记
11-29
然后去Vue.js 服务器渲染指南和nuxt官网看了看，发现文章大多都是搬运官网的内容，真正讲的清晰明了的很少。所以想写篇文章学习下SSR，希望能够帮助大家快速理解Vue SSR。 什么是SSR？ SSR，即服务器渲染，就是在...
HTML中for属性
科技向善
12-27 2221
<!-- 实际开发需要把input放进label中--> <!-- 重要：for 属性规定 label 与哪个表单元素绑定。 --> <label v-for="item in originHobbies" :for="item"> <!-- 使用item进行动态绑定value属性和id属性 --> <input...
慎用 JS 中的 for (var index in items) 循环数组项
Young01234的博客
12-05 1066
慎用 JS 中的 for (var index in items) 循环数组项 写在前面：有些朋友在搜索 for (var i in data)，这个是循环属性，和循环数组略有不同，请参见：JavaScript 的 for (var i in data)。 JavaScript 循环数组的项，我们一般人用 for (var i = 0; i < items.length;...
对于v-for中item in items中的理解
zhangjianshanshan的博客
01-24 2万+
困扰已久的问题是什么呢？这里我需要说的是其实就是对于v-for的理解 其实对于v-for也没有什么必要去理解，因为就是一个单纯的循环而已。对于这个循环，里面的问题以及他的内部属性是比较难理解的。 写个例子 这里我从官网上拿到的一个demo,这里你需要记住的是。对于v-for他就必须使用一种特殊的语法，item in items items代表的是数据中的数组，而我们说的这...
列表渲染、列表循环渲染
啊啊啊啊2
06-28 843
小程序：wx:for里面的item，index。以及自定义属性data-xxx的用法（双层循环取下标）。
热门推荐
乐~的博客
07-04 10万+
1.定义通俗来说，wx:for    这个是正常的循环，没什么可说的。wx:for-item=‘变量名（随便起的）’   它是指定循环数据当前的变量名，可以通过  {{变量名.属性}} 展示数组的元素。wx:for-index=‘变量名（随便起）’，它是指向当前元素的下标名，可以在其他事件中定义自定义事件（data-xxx='{{变量名}}'，，该自定义属性可以在参数e下面打印出来）获取该下标。2...
10【Vue全家桶之Vue基础】◆Vue概述 ◆ Vue基本使用 ◆ Vue模板语法 案例 ◆ Tab选项卡
嘿嘿_哈哈的博客
10-19 343
Vue全家桶之Vue基础 学习内容和目标：◆Vue概述 ◆ Vue基本使用 ◆ Vue模板语法 ◆ 基础案例 ◆ Vue常用特性 ◆ 综合案例 1. Vue概述 1.1 尤雨溪：Vue.js的创建者 2014年2月，Vue.js正式发布 2015年10月27日，正式发布1.0.0 2016年4月27日，发布2.0的预览版本 1.2 Vue：渐进式JavaScript框架 渐进式： 声明式渲染（最简单用法）→组件系统（通用代码）→客户端路由（单页面应用，页面局部更新，浏览器历史回退）→集中.
v-for=“(item, index) in arr“ :key=“index“
weixin_57396733的博客
05-09 1707
在下面的函数中，想要得到v-for="(item, index) in arr" :key="index"中的index,通过传参得到，不能直接在函数内部访问到
Vue中v-for=（index,item）in data :key=index,指令中的key遇到的问题:删除后成功后重新拉取数据，但是数据出现更新错误的现象
chelflan's blog
03-28 2万+
删除前 2.删除第二个后 现象 2.1 少了一个，第一位无任何变化； 2.2 第二个的id变了其它无任何变化； 2.3 本来删除的第二个，但是消失的确实第三个 原因分析 3.1 v-for中的key： v-for循环数据，当用for来更新已经被渲染的元素时，vue的“就地复用”策略，是不会改变数据项的顺序的，如果想要重新排序，需要为每项添加key（也就是每项的唯一id） 当使用v-...
Vue 中的列表渲染
weixin_33827590的博客
02-11 153
列表渲染 &lt;div id="app"&gt; &lt;div v-for="(item,index) of list" :key="index"&gt; {{item}} ---- {{index}} &lt;/div&gt; &lt;/div&gt; let vm = new Vue({ e...
Vue.2.0.5-列表渲染
weixin_34279246的博客
11-16 109
v-for 我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。 基本用法 &lt;ul id="example-1"&gt; &lt;li v-for="item in items"&gt; {{ item.message }} &lt;/li...
vue v-for 遍历对象 item,key,index
weixin_42448623的博客
08-09 1万+
<div id="app"> <!-- 获取value --> <div v-for="item in obj">value:{{item}}</div> <!-- 获取item,key--> <div v-for="(item,key) in obj">{{key}}--{{item}}</div> <!-- 获取item,key,index--> <div v-for
尚硅谷vue学习笔记
08-18
很高兴回答你关于尚硅谷Vue学习笔记的问题！对于Vue的学习，尚硅谷提供了很多优质的学习资源和教程。下面是一些关键的学习笔记要点： 1. Vue基础：了解Vue的基本概念和核心特性，如Vue实例、模板语法、计算属性、...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值