Vue中v-model的使用及案例

已于 2022-09-03 22:44:33 修改
阅读量2k 收藏 11
点赞数 2
分类专栏： Vue 文章标签： vue.js javascript 前端
于 2022-09-03 14:53:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45605541/article/details/126677457
版权

文章目录

1. 概述

v-model 是 Vue 提供的一个语法糖，它是 value 值和事件的结合体，它会根据不同的表单项，来选择执行不同的事件。它的作用是，通过和表单元素绑定，实现双向数据绑定，通过表单项可以更改数据。

另外，v-model 还可以用于各种不同类型的输入，<textarea>、<select> 元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合：

  • 文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件；
  • <input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听 change 事件；
  • <select> 会绑定 value property 并侦听 change 事件

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值，而总是将 Vue 实例的数据作为数据来源，应该在 data 选项中声明初始值。

语法糖：这种语法对语言的功能并没有影响，但是更方便程序员使用

2. 使用方法

在没有使用v-model指令时，我们通过data数据控制表单项中的值，还是麻烦的，需要绑定属性和事件来完成。

<div id="app">
    <div>
        <input type="text" :value="username" @input="setUsername">
    </div>
</div>

<script>
    const vm = new Vue({
        el: '#app',
        data: {
            username: ''
        },
        methods: {
            setUsername(evt) {
                this.username = evt.target.value.trim()
            }
        }
    })
</script>

在这里插入图片描述

使用 v-model 指令实现上述效果：

<div id="app">
    <div>
        <input type="text" v-model="username">
    </div>
</div>

<script>
    const vm = new Vue({
        el: '#app',
        data: {
            username: ''
        }
    })
</script>

在这里插入图片描述

3. 案例

3.1 案例：用户登录

使用 v-model 指令，可以很轻松的获取表单中的数据，也可以很轻松地对数据进行修改。

<!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>vue学习使用</title>

        <script src="./js/vue.js"></script>
    </head>

    <body>

        <div id="app">
            <div>
                <label>
                    账号：
                    <input type="text" v-model="username">
                </label>
            </div>
            <div>
                <label>
                    密码：
                    <input type="text" v-model="password">
                </label>
            </div>
            <div>
                <textarea v-model="intro"></textarea>
            </div>
            <div>
                <button @click="dologin">登录系统</button>
            </div>
        </div>

        <script>
            const vm = new Vue({
                el: '#app',
                data: {
                    username: '',
                    password: '',
                    intro: 'hahaha'
                },
                methods: {
                    dologin() {
                        console.log(this.username, this.password, this.intro);
                    }
                }
            })
        </script>

    </body>

</html>

在这里插入图片描述

注意：多行文本框中使用插值表达式 无效

3.2 案例：todolist

<!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>vue学习使用</title>
        <script src="./js/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <input placeholder="请输入内容" type="text" v-model="title" @keyup.enter="onEnter">
            <hr>
            <ul>
                <!-- 条件渲染 -->
                <li v-if="todos.length===0">无任务</li>
                <li v-else v-for="item,index in todos" :key="item.id">
                    <span>{{item.title}}</span>
                    <span @click="del(index)">删除</span>
                </li>
            </ul>
        </div>

        <script>
            const vm = new Vue({
                el: '#app',
                data: {
                    todos: [],
                    title: ''
                },
                methods: {
                    onEnter() {
                        this.todos.push({
                            id: Date.now(),
                            title: this.title
                        })
                        this.title = ''
                    },
                    del(index) {
                        // 删除 它可以使用 vue中提供的变异方法splice来完成，用此方法它会触发视图更新
                        this.todos.splice(index, 1)
                    }
                }
            })
        </script>

    </body>

</html>

在这里插入图片描述

3.3 案例：实现单个复选框

当单个复选框被选中或者被取消选中时，我们如何获取到该复选框是否被选中的信息？

我们可以通过绑定事件来获取：

<!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>vue学习使用</title>
        <!-- 第1步： 引入vue库文件 -->
        <script src="./js/vue.js"></script>
    </head>

    <body>
        <!-- 第2步：挂载点 -->
        <div id="app">
            <div>
                <!-- click事件可以用，但它是的状态会太过提前，用onchange事件，改变后来获取 -->
                <input type="checkbox" @click="clickFn">
                <input type="checkbox" @change="clickFn">
            </div>
        </div>

        <!-- 第3步：实例化vue -->
        <script>
            const vm = new Vue({
                el: '#app',
                data: {
                    // 单个复选框一定要用布尔类型
                    checked: false
                },
                methods: {
                    clickFn(evt) {
                        console.log(evt.target.checked);
                    }
                }
            })
        </script>

    </body>

</html>

在这里插入图片描述

注意：在绑定事件时，click事件可以用，但它是的状态会太过提前，所以用onchange事件，改变后再来获取。

更简单的方式是，通过 v-model 指令来获取：

<!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>vue学习使用</title>
        <!-- 第1步： 引入vue库文件 -->
        <script src="./js/vue.js"></script>
    </head>

    <body>
        <!-- 第2步：挂载点 -->
        <div id="app">
            <div>
                <!-- 单个复选框，在数据源中定义的数据类型为布尔类型 true选中，false未选中 -->
                <input type="checkbox" v-model="checked">
            </div>
        </div>

        <!-- 第3步：实例化vue -->
        <script>
            const vm = new Vue({
                el: '#app',
                data: {
                    // 单个复选框一定要用布尔类型
                    checked: false
                },
                methods: {

                }
            })
        </script>

    </body>

</html>

在这里插入图片描述

注意：单个复选框，在数据源中定义的数据类型为布尔类型：true 选中，false未选中

3.4 案例：实现多个复选框

<!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>vue学习使用</title>
  <!-- 第1步： 引入vue库文件 -->
  <script src="./js/vue.js"></script>
</head>

<body>
  <!-- 第2步：挂载点 -->
  <div id="app">
    <div>
      <!-- 

      -->
      <ul>
        <li>
          <input type="checkbox" value="html" v-model="lessons">html
        </li>
        <li>
          <input type="checkbox" value="css" v-model="lessons">css
        </li>
        <li>
          <input type="checkbox" value="js" v-model="lessons">js
        </li>
      </ul>
      <hr>
      <div>{{lessons}}</div>
    </div>
  </div>

  <!-- 第3步：实例化vue -->
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        // 默认选中
        lessons: ["js",'css']
      },
      methods: {
      }
    })
  </script>

</body>

</html>

在这里插入图片描述

注意：多个复选框，数据源中定义的数据类型为数组，标签中需要指定它的value值。

3.5 案例：实现复选框全选

<!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>vue学习使用</title>
        <!-- 第1步： 引入vue库文件 -->
        <script src="./js/vue.js"></script>
    </head>

    <body>
        <!-- 第2步：挂载点 -->
        <div id="app">
            <div>
                <input type="checkbox" v-model="checked" @change="onSelected">
                <hr>
                <ul>
                    <li>
                        <input type="checkbox" value="html" @change="selectlesson" v-model="lessons">html
                    </li>
                    <li>
                        <input type="checkbox" value="css" @change="selectlesson" v-model="lessons">css
                    </li>
                    <li>
                        <input type="checkbox" value="js" @change="selectlesson" v-model="lessons">js
                    </li>
                </ul>
                <hr>
                <div>{{lessons}}</div>
            </div>
        </div>

        <!-- 第3步：实例化vue -->
        <script>
            const vm = new Vue({
                el: '#app',
                data: {
                    lessons: [],
                    checked: false
                },
                methods: {
                    onSelected(evt) {
                        // 选中了
                        if (evt.target.checked) {
                            this.lessons = ["js", 'html', 'css']
                        } else {
                            this.lessons = []
                        }
                    },
                    selectlesson() {
                        // 只要来操作数据源就可以改变视图
                        this.checked = this.lessons.length == 3
                    }
                }
            })
        </script>

    </body>

</html>

在这里插入图片描述

3.6 案例：单选和下拉

<!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>vue学习使用</title>
        <!-- 第1步： 引入vue库文件 -->
        <script src="./js/vue.js"></script>
    </head>

    <body>
        <!-- 第2步：挂载点 -->
        <div id="app">
            <div>
                <h3>{{sex}} -- {{city}}</h3>
                <!-- 定义的数据类型为字符串 -->
                <label>
                    <input type="radio" value="先生" v-model="sex">建行
                </label>
                <label>
                    <input type="radio" value="女神" v-model="sex">招行
                </label>
            </div>
            <hr>
            <div>
                <select v-model="city">
                    <option value="0">==选择==</option>
                    <option value="wh">芜湖</option>
                    <option value="bj">北京</option>
                </select>
            </div>

        </div>

        <!-- 第3步：实例化vue -->
        <script>
            const vm = new Vue({
                el: '#app',
                data: {
                    sex: '先生',
                    city: '0'
                }
            })
        </script>

    </body>

</html>

在这里插入图片描述

注意：单选框和复选框都需要 input 标签提供 value 属性。

4. v-model修饰符

4.1 lazy

作用：延时更新数据源中的数据，失去焦点时触发更新。

<div id="app">
    <!-- v-model修饰符 -->
    <!-- 延时更新数据源中的数据 光标移开才会改变数据 -->
    <input v-model.lazy="title">
</div>

<script>
    const vm = new Vue({
        el: '#app',
        data: {
            title: ''
        }
    })
</script>

在这里插入图片描述

4.2 trim

作用：自动过滤用户输入的首尾空白字符。

<div id="app">
    <!-- 去空格 trim -->
    <input v-model.trim="title">
</div>

<script>
    const vm = new Vue({
        el: '#app',
        data: {
            title: ''
        }
    })
</script>

在这里插入图片描述

4.3 number

作用：输入值转为数值类型。

<div id="app">
    <!-- 转为数值 number -->
    <input type="number" v-model.number="n1">
    +
    <input type="number" v-model.number="n2">
    = {{n1+n2}}
</div>

<script>
    const vm = new Vue({
        el: '#app',
        data: {
            n1: 1,
            n2: 2
        }
    })
</script>

在这里插入图片描述

5. 案例

5.1 案例：购物车

<!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>vue学习使用</title>
        <!-- 第1步： 引入vue库文件 -->
        <script src="./js/vue.js"></script>
    </head>

    <body>
        <!-- 第2步：挂载点 -->
        <div id="app">
            <table border="1" width="600">
                <tr>
                    <th>序号</th>
                    <th>名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
                <tr v-for="item,index in carts">
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button @click="setNum(1,index)">+++</button>
                        <input type="number" v-model="item.num">
                        <button @click="setNum(-1,index)">---</button>
                    </td>
                    <td>
                        <button @click="del(index)">删除</button>
                    </td>
                </tr>
            </table>
            <hr>
            <h3>
                合计：
                {{totalPrice()}}
            </h3>

        </div>

        <!-- 第3步：实例化vue -->
        <script>
            const vm = new Vue({
                el: '#app',
                data: {
                    carts: [
                        { id: 1, name: '小米12pro', price: 1, num: 1 },
                        { id: 2, name: '华为手机', price: 2, num: 1 },
                        { id: 3, name: '水果手机', price: 3, num: 1 },
                    ]
                },
                methods: {
                    setNum(n, index) {
                        this.carts[index].num += n
                        if (this.carts[index].num <= 1) this.carts[index].num = 1
                        if (this.carts[index].num >= 3) this.carts[index].num = 3
                        // 用最大值和最小值来限制它的范围，可以了解一下这种写法
                        // this.carts[index].num = Math.min(3, Math.max(1, this.carts[index].num))
                    },
                    totalPrice() {
                        // 聚合运算
                        return this.carts.reduce((prev, { price, num }) => {
                            prev += price * num
                            return prev
                        }, 0)
                    },
                    del(index) {
                        // 弹出确认框
                        confirm('确定删除') && this.carts.splice(index, 1)
                    }
                }
            })
        </script>
    </body>
</html>

在这里插入图片描述

5.2 案例：购物车持久化

<!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>vue学习使用</title>
        <!-- 第1步： 引入vue库文件 -->
        <script src="./js/vue.js"></script>
    </head>

    <body>
        <!-- 第2步：挂载点 -->
        <div id="app">
            <table border="1" width="600">
                <tr>
                    <th>序号</th>
                    <th>名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
                <tr v-for="item,index in carts">
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button @click="setNum(1,index)">+++</button>
                        <input type="number" v-model="item.num">
                        <!-- <button @click="setNum(-1,item)">---</button> -->
                        <button @click="setNum(-1,index)">---</button>
                    </td>
                    <td>
                        <button @click="del(index)">删除</button>
                    </td>
                </tr>
            </table>
            <hr>
            <h3>
                合计：
                {{totalPrice()}}
            </h3>

        </div>

        <!-- 第3步：实例化vue -->
        <script>
            // 初始数据应该从本地存储中读取
            function getCarts() {
                return !window.localStorage.getItem('carts') ? [{ id: 1, name: '小米12pro', price: 1, num: 1 },
                                                                { id: 2, name: '华为手机', price: 2, num: 1 },
                                                                { id: 3, name: '水果手机', price: 3, num: 1 }] : JSON.parse(window.localStorage.getItem('carts'))
            }
            function setCarts(carts) {
                window.localStorage.setItem('carts', JSON.stringify(carts))
            }

            const vm = new Vue({
                el: '#app',
                data: {
                    carts: getCarts()
                },
                methods: {
                    setNum(n, index) {
                        this.carts[index].num += n
                        if (this.carts[index].num <= 1) this.carts[index].num = 1
                        if (this.carts[index].num >= 3) this.carts[index].num = 3
                        // 用最大值和最小值来限制它的范围，可以了解一下
                        // this.carts[index].num = Math.min(3, Math.max(1, this.carts[index].num))
                        setCarts(this.carts)
                    },
                    totalPrice() {
                        return this.carts.reduce((prev, { price, num }) => {
                            prev += price * num
                            return prev
                        }, 0)
                    },
                    del(index) {
                        if(confirm('确定删除')){
                            this.carts.splice(index, 1)
                            setCarts(this.carts)
                        }
                    }
                }
            })
        </script>

    </body>

</html>

在这里插入图片描述

月光晒了很凉快
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
如何理解Vue的v-model指令的使用方法
01-19
本文主要讲解v-model指令，主要包括HTML元素的v-model和组件上的v-model两种，用四个简单的案例介绍v-model的使用。 案例一：HTML元素的v-model -输入框(text) <!DOCTYPE html> <html lang=en> <head...
Vue----任务列表案例
05-01
用到的知识点 ① vite 创建项目 ...③ props ...⑦ 组件上的 v-model 整体实现步骤 ① 使用 vite 初始化项目 ② 梳理项目结构 ③ 封装 todo-list 组件 ④ 封装 todo-input 组件 ⑤ 封装 todo-button 组件
Hadoop-MapReduce学习
迷路剑客个人博客
01-24 1208
Hadoop-MapReduce学习 摘要 本文简要将就爱你过MapReduce，重点是Shuffle部分 0x01 MapReduce-Mapper侧 1.1 简介 以上是一张Hadoop官方创作的MR过程图示。我们以大数据届的HelloWorld-WordCount为例讲述下MR过程。 1.2 Split-分片 1.2.1 Split简述 Map阶段的输入通常是HDFS上文件。 在运行Ma...
Vue之v-model的使用
热门推荐
weixin_42504805的博客
06-09 2万+
v-model
Vue 框架之 v-model 指令详解
qq_52266105的博客
02-19 276
因为我使用的是同一个 data 配置项的值，所以在修改一个 v-model 指令值的时候，另一个指令值也会发生相同的改变（而在这里这也验证了简写语法是成功的）v-model:value"表达式" 简写为 v-model = "表达式"1.v-bind和v-model这两个指令都可以完成数据绑定。v-bind:参数"表达式" 简写为 :参数 = "表达式"v-model指令通常也是用在value属性上面的。结果只有【v-model】指令才能成功（因为该指令是。v-bind和v-model的区别和联系。
Vue之v-model
玉案轩窗的博客
07-24 3246
前言 上一篇文章主要了解Vue的数据对象的构建，实际主要是attrs、props和DomProps的比较，而在template形式中有个关键点就是特殊属性的处理，而数据属性中特殊属性的处理实际上就会涉及到v-model语法糖。 本文的目标有两个： v-model语法糖的实现逻辑 涉及特殊属性的v-model的特殊处理 v-model实现逻辑 从简单实例出发，来梳理v-model的处理逻辑： &...
详解vue中的v-model
weixin_57446003的博客
11-20 2727
vue.js 中 v-model 语法糖的使用及进阶用法
v-model
qq_33879627的博客
09-21 461
（十）v-model 10.1 v-model的基本使用 <div id="app"> <!-- 输入框内容修改，message也修改，修改message，input内容也修改，双向绑定 --> <input type="text" v-model="message">{{message}} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue
elementUi vue el-radio 监听选中变化的实例代码
01-19
elementUi vue el-radio 监听选中变化的实例代码如下所述： //change是radio-group标签的事件 <el v-model=radioSex change=changeHandler> 男 女 export default { name: 'Radio',
在vue中使用vant TreeSelect分类选择组件操作
01-22
中文文档：TreeSelect 分类选择 效果展示： ... <van v-model=policeShow position=top overlay=true> <van-tree-select :items=items :active-id.sync=items.activeId :main-active-index.sync=ite
vue案例-学生列表.rar
03-13
利用Vue制作一个简单的学生列表或面、来实现学生信息的动态添加和删除，涉及指令v-on，v-show，v-model等等。
vue v-model的详细介绍
FGGIT的博客
02-03 3026
vue v-model的详细介绍
vue中内置指令v-model的作用和常见使用方法介绍以及在自定义组件上支持
最新发布
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
04-09 5510
在计算机科学中，语法糖（syntactic sugar）是指编程语言中可以更容易地表达一个操作的语法。它可以使程序员更加容易地使用这门语言，使操作变得更加清晰、方便，或者更加符合程序员的编程习惯。具体来说，语法糖是语言中的一个构件，当去掉该构件后并不影响语言的功能和表达能力。例如，C语言中的标记a[i]就是*(a+i)的语法糖。语言的处理器，包括编译器，静态分析器等，经常会在处理之前把语法糖构件转换成更加基础的构件，这个过程通常被称为"desugaring"。简而言之，语法糖就是一种便捷写法。
vue动态生成v-model
weixin_59817492的博客
11-03 739
vue动态生成v-model
Vue动态设置v-model
chenguixu的博客
10-22 6138
需求：从后端获取到列表数据如下，想动态渲染el-input输入框，以propertyNameZh的值为标签名，propertyNameEn的值为v-model绑定对象。 goodsProperty：[ { 'propertyNameZh':'商品售价', 'propertyType':'text', 'propertyNameEn':'goodsPrice', 'propertyUnit':'元', }, {
vue之动态绑定v-model(封装公共的查询组件)
Java_xiaobai1的博客
05-30 1898
人狠话不多,直接上代码,直接复制粘贴就可以使用。
Vue3小案例—v-model 双向数据绑定实现动态列表增加和删除
qq_55930097的博客
08-03 949
当一个表单元素（如input、textarea）的值发生变化时，它会触发一个change事件或input事件，Vue.js 会监听这些事件并更新数据。同时，当Vue实例的数据发生变化时，也会触发一个更新视图的事件，从而实现数据与视图的。，它可以将表单元素的值与Vue实例的数据绑定在一起，当表单元素的值发生改变时，Vue实例的数据也会随之更新，反之亦然。v-model 只能用于表单元素，如input、textarea、select 等，而不能用于自定义组件。v-model 的原理实际上就是通过。
vue-例3-13v-model动态属性2.html
虾米大王的学习历程
04-24 72
【代码】vue-例3-13v-model动态属性2.html。
描述一下什么是Vue2中的v-model指令，并编写一个简单案例
06-08
Vue2中的v-model指令是一种双向绑定的指令，用于将表单元素的值绑定到Vue实例的数据中。v-model指令同时在表单元素的输入事件和Vue实例数据属性的改变事件之间建立了一个双向绑定关系，使得表单元素和Vue实例数据之间的变化可以互相同步。 以下是一个使用v-model指令的简单案例： HTML代码： ``` <div id="app"> <input v-model="message" type="text"> <p>{{ message }}</p> </div> ``` Vue实例代码： ``` var app = new Vue({ el: '#app', data: { message: '' } }) ``` 在上面的代码中，我们使用v-model指令将input元素的值绑定到Vue实例的message属性上。每当input元素的值发生变化时，Vue实例的message属性也会相应地更新，反之亦然。同时，我们使用了{{ message }}语法来显示message属性的值，这样就可以看到input元素和message属性之间的双向绑定效果了。 当我们在输入框中输入一些文本时，下面的p标签也会实时更新显示相同的文本，说明双向绑定已经生效了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值