Vue-渲染：条件渲染、列表渲染

已于 2022-08-04 12:00:06 修改
阅读量737 收藏 3
点赞数
分类专栏： vue2+vue3 文章标签： vue.js 前端 javascript
于 2022-07-16 21:04:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mantou_riji/article/details/125818721
版权

文章目录

条件渲染

v-show

显示与隐藏。
v-show=true表示显示
v-show=false表示隐藏
实现原理：调用display来控制显示与隐藏

    <div id ="root">
        <h2 v-show="false">欢迎，{{name}}</h2>
    </div>

控制台显示：
在这里插入图片描述
v-show的值当然也可以是返回值为true或false的表达式。

v-if

v-if也可以控制显示与隐藏
v-if=true表示显示
v-if=false表示隐藏
实现原理：将整个结构删除

    <div id ="root">
        <h2 v-if="false">欢迎，{{name}}</h2>
    </div>

控制台显示：
在这里插入图片描述
所以 v-if比v-show的消耗更大

v-else-if

和 v-if 一起使用，和 else if的用法一样：
先判断v-if是否满足条件，如果不满足再判断 v-else-if是否满足条件

        <div v-if="n===1">n=1</div>
        <div v-else-if="n===2">n=2</div>
        <div v-else-if="n===3">n=3</div>

v-else

和else用法一样，和 v-if，v-else-if 一起用：
当v-if，v-else-if 都不满足条件时就执行v-else，v-else后面无需跟条件

        <div v-if="n===1">n=1</div>
        <div v-else-if="n===2">n=2</div>
        <div v-else-if="n===3">n=3</div>
        <div v-else>哈哈</div>

v-if，v-else-if 和 v-else连用时要连着使用中间不能插入其他语句，如在v-if和v-else-if两条语句之间插入一个<div></div>，v-if和v-else-if就来不连来了，就不能正常判断了。

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id ="root">
        <h2 v-show="true">欢迎，{{name}}</h2>
        <h2>当前的n值是:{{n}}</h2>
        <button @click="n++">点击n+1</button>
        <div v-if="n===1">n=1</div>
        <div v-else-if="n===2">n=2</div>
        <div v-else-if="n===3">n=3</div>
        <div v-else>哈哈</div>
    </div>
    <script type='text/javascript'>
    Vue.config.productionTip = false;

        new Vue({
            el:'#root',
            data: {
                name:"yang",
                n:0
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

v-show 和v-if

v-if适用于切换频率较低的场景。
v-show适用于切换频率较高的场景。
使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

template

<template> </template>

<template>标签是模板的意思，它的一个优点是不会被解析到页面上，即不影响页面结构

template和v-if结合使用

        <template v-if="n===1">
            <h2>Hello</h2>
            <h2>你好</h2>
        </template>

解析结果：
在这里插入图片描述
外层没有template标签
而且template只能和v-if联用，不能和v-show联用。

列表渲染

v-for

循环生成：想要生成谁，就在谁身上使用v-for

遍历数组

格式：

       <ul>
        <li v-for="item in(或of) 要遍历的数组">
            {{item}}
        </li>
       </ul>

一般情况下每条数据有一个对应的key值，每条数据的key值是唯一的，遍历数组时实际上还有一个参数，代表的是数组的下标，我们通常将该参数设置为key值。

       <ul>
        <li v-for="(item,index)in 要遍历的数组" :key="index">
             {{item}}
        </li>
       </ul>

当然，如果有自己定义的id属性，也可以将key定义成自己设置的id属性：

<body>
    <div id ="root">
       <ul>
        <li v-for="(p,index) in persons" :key="p.id">
            {{p.name}}-{{p.age}}
        </li>
       </ul>
    </div>
    <script type='text/javascript'>
    Vue.config.productionTip = false;

        new Vue({
            el:'#root',
            data: {
                name:"yang",
                persons:[
                    {id:'001',name:'张三',age:18},
                    {id:'002',name:'李四',age:21},
                    {id:'003',name:'王五',age:19}
                ]
            }
        })
    </script>
</body>

在这里插入图片描述

遍历对象

格式：

 <ul>
     <li v-for="(value,key) in 对象名" :key="key">
     	{{key}}-{{value}}
     </li>
</ul>

eg：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <ul>
        <li v-for="(value,key) in person" :key="key">{{key}}-{{value}}</li>
      </ul>
    </div>
    <script type="text/javascript">
      Vue.config.productionTip = false;

      new Vue({
        el: "#root",
        data: {
          name: "yang",
          person:{
            name: "yang",
            age: 18,
            gender: "male",
          }
        },
      });
    </script>
  </body>
</html>

在这里插入图片描述

遍历字符串

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
     <ul>
        <li v-for="(char,index) in str" :key="index">{{index}}-{{char}}</li>
      </ul>
    </div>
    <script type="text/javascript">
      Vue.config.productionTip = false;

      new Vue({
        el: "#root",
        data: {
          str:"hello"
        },
      });
    </script>
  </body>
</html>

在这里插入图片描述

遍历指定次数

<ul>
  <li v-for="(number,index) in 5" :key="index">{{index}}-{{number}}</li>
</ul>

在这里插入图片描述

v-for中key的作用与原理

key是由vue内部使用的，是供拟vue中虚拟DOM作用的。

vue数据的转化——虚拟DOM

首先我们要知道vue不是直接生成真实DOM的，而是先生成虚拟DOM，之后再转化为真实DOM.
代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
        <h2>人员列表</h2>
      <ul>
        <li v-for="(p,index) in persons" :key="index">{{p.name}}-{{p.age}}
            <input type="text">
        </li>
      </ul>
    </div>
    <script type="text/javascript">
      Vue.config.productionTip = false;

      new Vue({
        el: "#root",
        data: {
          name: "yang",
          persons: [
            { id: "001", name: "张三", age: 18 },
            { id: "002", name: "李四", age: 21 },
            { id: "003", name: "王五", age: 19 },
          ]
        },

      });
    </script>
  </body>
</html>

数据转换：

在这里插入图片描述

vue中key的作用

key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据新数据生成新的虚拟DOM,随后Vue会通过key进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下:
对比规则:（Diff算法）

  1. 旧虚拟DOM中找到了与新虚拟DOM相同的key；
  • 若虚拟DOM中内容没变,直接使用之前的真实DOM
  • 若虚拟DOM中内容变了，则生成新的真实DOM随后替换掉页面中之前的真实DOM.
  1. 旧虚拟DOM中未找到与新虚拟DOM相同的key
    创建新的真实DOM,随后渲染到到页面。

演示：
代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h2>人员列表</h2>
      <button @click.once="addPerson">点击添加赵六</button>
      <ul>
        <li v-for="(p,index) in persons" :key="index">
          {{p.name}}-{{p.age}}
          <input type="text" />
        </li>
      </ul>
    </div>
    <script type="text/javascript">
      Vue.config.productionTip = false;

      new Vue({
        el: "#root",
        data: {
          name: "yang",
          persons: [
            { id: "001", name: "张三", age: 18 },
            { id: "002", name: "李四", age: 21 },
            { id: "003", name: "王五", age: 19 },
          ],
        },
        methods: {
          addPerson() {
            const p = { id: "004", name: "赵六", age: 23 };
            this.persons.push(p);
          },
        },
      });
    </script>
  </body>
</html>

在这里插入图片描述

点击添加按钮之后vue的处理过程（以处理一个节点为例子）

在这里插入图片描述

vue中key去index还是自定义的id

使用index出现的问题：

上述例子如果把新的数据插入到数组开头就会出现问题：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
        <h2>人员列表</h2>
        <button @click.once="addPerson">点击添加赵六</button>
      <ul>
        <li v-for="(p,index) in persons" :key="index">{{p.name}}-{{p.age}}
            <input type="text">
        </li>
      </ul>
    </div>
    <script type="text/javascript">
      Vue.config.productionTip = false;

      new Vue({
        el: "#root",
        data: {
          name: "yang",
          persons: [
            { id: "001", name: "张三", age: 18 },
            { id: "002", name: "李四", age: 21 },
            { id: "003", name: "王五", age: 19 },
          ]
        },
        methods: {
            addPerson(){
                const p ={id:"004",name:"赵六",age:23}
                this.persons.unshift(p)
            }
        },

      });
    </script>
  </body>
</html>

添加前：
在这里插入图片描述
添加后：
在这里插入图片描述
位置不太对。
分析出现问题原因
在这里插入图片描述
这样不仅出现了错误，效率也非常底。因为由于key相同的名字不同，就将自己的名字又创建一边放在真实DOM中，就等于说所有的名字都是又创建一边的，没有实现复用，效率底。

小结
用index作为key可能会引发的问题:

  1. 若对数据进行:逆序添加、逆序删除等破坏顺序操作:
    会产生没有必要的真实DOM更新==>界面效果没问题，但效率低。
  2. 如果结构中还包含输入类的DOM:
    会产生错误DOM更新==>界面有问题。
使用自己定义的id就不会出现了：
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
        <h2>人员列表</h2>
        <button @click.once="addPerson">点击添加赵六</button>
      <ul>
        <li v-for="(p,index) in persons" :key="p.id">{{p.name}}-{{p.age}}
            <input type="text">
        </li>
      </ul>
    </div>
    <script type="text/javascript">
      Vue.config.productionTip = false;

      new Vue({
        el: "#root",
        data: {
          name: "yang",
          persons: [
            { id: "001", name: "张三", age: 18 },
            { id: "002", name: "李四", age: 21 },
            { id: "003", name: "王五", age: 19 },
          ]
        },
        methods: {
            addPerson(){
                const p ={id:"004",name:"赵六",age:23}
                this.persons.unshift(p)
            }
        },

      });
    </script>
  </body>
</html>

添加前：
在这里插入图片描述
添加后：
在这里插入图片描述
这是因为没个对象都有自己的id作为key值，那就不会使用vue生成的index，就不会出现”错位“现象。
在这里插入图片描述

选择index还是id总结

  1. 最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。
  2. 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示,使用index作为key是没有问题的。

列表过滤——模糊搜索

通过条件对列表进行过滤查询：

需求：输入框输入名字，可以进行搜索显示
效果：
在这里插入图片描述
在这里插入图片描述

watch实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
    <input type="text" v-model="keyWord" placeholder="请输入名字">
      <ul>
        <li v-for="(p,index) in filPerson" :key="p.id">{{p.name}}-{{p.age}}-{{p.age}}</li>
      </ul>
      
    </div>
    <script type="text/javascript">
      Vue.config.productionTip = false;
      new Vue({
        el: "#root",
        data: {
          keyWord: "",
          persons: [
            { id: "001", name: "张三", age: 18,sex:"男" },
            { id: "002", name: "李四", age: 21,sex:"男" },
            { id: "003", name: "王五", age: 19,sex:"男" },
            { id: "004", name: "张浩", age: 19,sex:"男" },
            { id: "005", name: "小四", age: 19,sex:"男" },
          ],
          filPerson:[]
        },
        watch:{
            keyWord:{
                immediate:true,
                handler(newValue){
                this.filPerson = this.persons.filter((p)=>{
                    // 过滤名字中包含搜索值得数据
                    // 空串中都包含空串""
                    return p.name.indexOf(newValue)!=-1
                })
            }
            }
        }

      });
    </script>
  </body>
</html>

计算属性实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
    <input type="text" v-model="keyWord" placeholder="请输入名字">
      <ul>
        <li v-for="(p,index) in filPerson" :key="p.id">{{p.name}}-{{p.age}}-{{p.age}}</li>
      </ul>
    </div>
    <script type="text/javascript">
      Vue.config.productionTip = false;
    //   计算属性实现
    new Vue({
        el:'#root',
        data: {
          keyWord: "",
          persons: [
            { id: "001", name: "张三", age: 18,sex:"男" },
            { id: "002", name: "李四", age: 21,sex:"男" },
            { id: "003", name: "王五", age: 19,sex:"男" },
            { id: "004", name: "张浩", age: 19,sex:"男" },
            { id: "005", name: "小四", age: 19,sex:"男" },
          ]
        },
          computed:{
            filPerson(){
                return this.persons.filter((p)=>{
                    return p.name.indexOf(this.keyWord)!=-1
                })
            }

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

列表排序

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <input type="text" v-model="keyWord" placeholder="请输入名字" />
      <button @click="sortType=2">年龄升序</button>
      <button @click="sortType=1">年龄降序</button>
      <button @click="sortType=0">原顺序</button>
      <ul>
        <li v-for="(p,index) in filPerson" :key="p.id">
          {{p.name}}-{{p.age}}-{{p.sex}}
        </li>
      </ul>
    </div>
    <script type="text/javascript">
      Vue.config.productionTip = false;
      new Vue({
        el: "#root",
        data: {
          keyWord: "",
          sortType: 0, //0原顺序，1降序，2升序
          persons: [
            { id: "001", name: "张三", age: 18, sex: "男" },
            { id: "002", name: "李四", age: 21, sex: "男" },
            { id: "003", name: "王五", age: 19, sex: "男" },
            { id: "004", name: "张浩", age: 30, sex: "男" },
            { id: "005", name: "小四", age: 19, sex: "男" },
          ],
        },
        computed: {
          filPerson() {
            const arr = this.persons.filter((p) => {
              return p.name.indexOf(this.keyWord) != -1;
            });
            if (this.sortType) {
              arr.sort((a, b) => {
                return this.sortType === 1 ? b.age - a.age : a.age - b.age;
              });
            }
            return arr;
          },
        },
      });
    </script>
  </body>
</html>

在这里插入图片描述
在这里插入图片描述

_洋
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中控制v-for循环次数的实现方法
10-17
今天小编就为大家分享一篇Vue中控制v-for循环次数的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue之条件与循环渲染（二）
weixin_52129860的博客
03-08 512
v-if 和 v-elsev-showv-if 和 v-show 比较v-for 将数组数据渲染成元素v-for 将对象数据渲染成元素key 属性数组更新检测对象更新的注意事项本小节涉及的知识点比较多，但是还是比较容易理解，并且这些指令方法基本都会搭配使用，重点需要注意数组和对象操作中一些小知识，有些情况下用 Vue.set 来操作数组或者对象，才能建立响应式，才能触发视图更新。
在Vue 中实现循环渲染多个相同echarts图表
10-15
主要介绍了在Vue 中实现循环渲染多个相同echarts图表，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
ant design vue中表格指定格式渲染方式
01-18
注意点：定义的columns一定要写在data中，否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别 渲染方法1： 指定渲染函数： const columns = [ { title: '排名', dataIndex: 'key', customRender: renderContent // 渲染函数的规则 }, { title: '搜索关键词', dataIndex: 'keyword', customRender: (text, row, index) => { if (index < 4) { // 前4行
浅谈vue异步数据影响页面渲染
10-16
今天小编就为大家分享一篇浅谈vue异步数据影响页面渲染，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
25.Vue列表渲染
爱米酱的博客
07-04 471
这一节开始我们来学一下Vue中与列表渲染相关的东西，这部分知识很重要，而且还比较多，所以我就拆成几个小节来讲。那么这一小节我们就先讲讲基本列表，把基本列表讲清楚之后，我们再讲key的原理，列表过滤和列表排序 实现效果：讲到这里这个遍历就已经实现了，但是这里还有一个特别重要的属性，就是key，我们这里不详谈这个属性，这一节我们只关注怎么配置这个属性即可，具体的深入分析内容会在下一节呈现。和key相关的内容我们可以在Vue官网的学习-->API中找到。 这个key属性就是给遍历的每一项加了一个特殊标识，虽然
Vue中动态渲染颜色样式（基于后端返回的颜色动态展示/循环渲染）
m0_67841039的博客
01-16 871
Vue中动态渲染颜色样式（基于后端返回的颜色动态展示/循环渲染）
ant-design-vue table中columns根据某一元素设置颜色属性
pleaseprintf的博客
03-24 4712
ant-design-vue table中columns根据某一元素设置颜色属性
vue element-ui中有关表格中的数据整条显示红色/绿色等等颜色的问题
九七的博客
02-22 2023
【代码】vue element-ui中有关表格中的数据整条显示红色/绿色等等颜色的问题。
【Vue】条件渲染&列表渲染来啦
思索的涟漪，突破自我
09-27 397
小索奇全套Vue v-if这个指令根据表达式的真假来决定是否渲染元素例如: 2. v-else-if/v-elsev-else-if表示v-if的“else-if”条件,v-else表示最后的“else”条件例如: 3. 用key管理可复用元素让Vue通过key值识别元素,提高渲染效率例如: 4. v-show基于CSS显示/隐藏元素,只是切换display例如: 如果要频繁的更改，使用会更好点，因为它仅是切换隐藏显示，效率更高v-if 和 v-show 在条件渲染时的选择判断如下当需要完全切换显示/隐
egg-vue-webpack-boilerplate：Egg Vue服务器端渲染（SSR）客户端渲染（CSR）
02-06
基于Egg + Vue + Webpack SSR服务端渲染和CSR前端渲染工程框架项目，包括前台系统（SSR MPA）和后台管理系统（SSR SPA）。 文件 系统功能 前台博客系统 采用Egg + Vue服务端渲染 博客首页 文章列表 文章详情 后台...
vue-better-list-view:vue长列表按需渲染
05-18
vue长列表按需渲染， 使用 提供npm版本和umd版本 npm 安装 // install npm i vue-better-list-view --save-dev // in your project import listView from 'vue-better-list-view' 或 umd 引入 [removed][removed] ...
Vue-Gantt-chart:使用Vue做数据控制的Gantt图表
08-05
vue-gantt-chart 基于 Vue 实现的 gantt-like 图表 ,用于...虚拟列表，快速渲染可视区域，支持大量数据渲染 可变时间轴，1 分钟，2 分钟，3 分钟，4 分钟~~~到一天 可变单元格 标记线 支持自定义描述和容器块 Screen
vue-virtual-scroll-grid：Vue 3的可重用组件，以高效的方式将具有大量项目（例如1000多个项目）的列表呈现为网格
02-15
Vue 3的虚拟滚动网格这是Vue 3的可重用组件，它以高效的方式将具有大量项目（例如1000多个项目）的列表呈现为网格。特征使用虚拟滚动/窗口化渲染项目，因此DOM节点数很少。 支持使用分页的API在后台加载项目。 支持...
vue-virtual-scroll-list::high_voltage:一个Vue组件以高渲染性能和高效率支持大量数据列表
04-30
具有高渲染性能和效率的大数据列表。 您不必担心项目大小，它将自动计算。现场演示 https://codesandbox.io/s/live-demo-virtual-list-e1ww1 使用简单npm install vue-virtual-scroll-list --save 根成分： ...
vue里a标签从后台获取链接并实现跳转
qq_52959651的博客
12-06 3311
vue里a标签从后台获取链接并实现跳转 当我从data里写一个json时，页面渲染循环出json文件，链接可以实现跳转。 代码： <style> #app{ min-width: 1200px; margin: 0px 60px; } #app ul li{ display: inline-block; border: 1px s
vue中使用for循环子组件渲染7次导致接口调用7次
最新发布
LRQQHM的博客
10-08 347
缓存数据：在父组件中进行接口调用，并将获取到的数据缓存起来。然后在子组件中使用缓存的数据进行渲染，而不是每次都调用接口。您可以使用Vue的provide/inject功能或者Vuex来实现数据的共享和缓存。使用异步组件：将子组件定义为异步组件，这样它们只会在第一次渲染时才会被加载和实例化。在后续的渲染中，它们会直接复用之前已经加载的实例，从而避免了重复调用接口。使用条件渲染：在父组件中使用条件渲染来控制子组件的显示与隐藏。只有当需要显示某个子组件时，才进行接口调用并将数据传递给该子组件。
Vue - v-for 循环渲染多个 “重复“ 子组件（仅 ref 不同，this.$refs.xx 使用时依然能准确找到子组件）将子组件 ref 设为动态，这样每个子组件都是 “独立“ 的！详细教程
王佳斌
02-21 5423
vue 组件ref 怎么是变量，vue 组件的refs如何绑定变量，循环数组v-for中使用refs，Vue 父组件循环使用refs调用子组件方法，Vue ref 和 v-for 结合，vue 循环动态设置ref并获取$refs方式，vue中 $ref的使用(v-for组件内使用ref)，vue循环渲染子组件，vue如何让组件的ref变成动态的，vue怎么将循环体内插入子组件，vue把组件ref设为动态,然后用refs再找到，vue 动态赋值ref，vue同一个子组件循环出来如何使用，vue将子组件设置动态
VUE3 之 循环渲染
追风人的博客
12-31 2617
目录 1. 概述 2. 循环渲染 3. 综述 4. 个人公众号 1. 概述 老话说的好：单打独斗是不行的，要懂得合作。 言归正传，今天我们来聊聊 VUE3 的 循环渲染。 2. 循环渲染 2.1 循环渲染数组 <body> <div id="myDiv"></div> </body> <script> const app = Vue.createApp({ // 创建一个vue应用实例
vue v-for列表渲染
07-08
在Vue中，v-for指令用于循环渲染数组或对象的数据，而key属性则是用来帮助Vue识别每个节点的唯一性，从而提高渲染性能的。当Vue更新DOM时，它会根据key值来判断哪些节点需要更新，哪些节点需要删除，哪些节点需要...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值