【day 03】初始vue的相关指令

已于 2023-05-26 11:02:27 修改
阅读量1k 收藏
点赞数
分类专栏： Vue 文章标签： vue.js 前端 javascript
于 2023-05-26 11:00:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_57858263/article/details/130514241
版权

事件函数传参情况

1.函数不需要定义参数，作为事件函数使用时 不需要带（）
2.函数定义了形参 但是没有加括号 fn形参接收到的是 事件对象
3.函数定义了形参 @click=“fn()” 接收到的是undefined
4.正常传参 正常接收
5.既需要传参 也需要使用 事件对象

@click="fn('我爱你',$event)
 methods: {
            fn(val,event){
                console.log(val,event);
               this.bool=!this.bool
            }
           },

多事件处理器（了解）

 <span :class="{red:bool}" @click="fn1($event),fn2($event)">点击变换颜色</span> 
  methods: {
            fn(val,event){
                console.log(val,event);
               this.bool=!this.bool
            },
            fn1(event){
                console.log(1)
            },
            fn2(event){
                console.lo#g(2)
            }
           },

v-on 事件修饰符

<!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>
    <style>
        .father{
            width: 500px;
            height: 400px;
            padding: 20px;
            background-color: skyblue;
        }
        .child{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="app">
          <div class="father" @click="fn">
            <p class="child" @click="fn1"></p>
          </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
// 会发生事件冒泡
       new Vue({
           el:"#app",
           data(){
               return{
                   bool:true,
               }
           },
           methods: {
            fn(){
                console.log('我是爸爸');
             
            },
            fn1(){
                console.log('我是儿子');
             
            },
         
           },
       })
   </script>
</body>
</html>
阻止事件冒泡
<!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>
    <style>
        .father{
            display: none;
            position: fixed;
            top:0;
            left:0;
            bottom:0;
            right:0;
            background-color: rgba(0,0,0,.4);
        }
        .child{
          position: absolute;
          width: 200px;
          height: 200px;
          left:50%;
          top:50%;
          transform: translate(-50%,-50%);
          background-color: pink;
        }
        span{
            position: absolute;
            top:0;
            right: 0;
            width: 50px;
            height: 50px;
            background-color: red;
        }
        .show{
            display: block;
        }
    </style>
</head>
<body>
    <div id="app">
          <div class="father" @click="fn" :class="{show:bool}">
             <p class="child" @click="fn1"><!--点击p标签，会阻止事件冒泡 -->
                <span @click="fn">x</span>
            </p>
          </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
//阻止事件冒泡
       new Vue({
           el:"#app",
           data(){
               return{
                   bool:true,
               }
           },
           methods: {
            fn(){
                this.bool = false
                console.log('我是爸爸');
             
            },
            fn1(event){
              event.stopPropagation();
        
                console.log('我是儿子');
             
            },
         
           },
       })
   </script>
</body>
</html>

  <style>
        .father{
            display: none;
            position: fixed;
            top:0;
            left:0;
            bottom:0;
            right:0;
            background-color: rgba(0,0,0,.4);
        }
        .child{
          position: absolute;
          width: 200px;
          height: 200px;
          left:50%;
          top:50%;
          transform: translate(-50%,-50%);
          background-color: pink;
        }
        span{
            position: absolute;
            top:0;
            right: 0;
            width: 50px;
            height: 50px;
            background-color: red;
        }
        .show{
            display: block;
        }
    </style>
</head>
<body>
    <div id="app">
          <div class="father" @click="fn" :class="{show:bool}">
             <p class="child" @click.stop><!--点击p标签，会阻止事件冒泡 -->
                <span @click="fn">x</span>
            </p>
          </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
//阻止事件冒泡
       new Vue({
           el:"#app",
           data(){
               return{
                   bool:true,
               }
           },
           methods: {
            fn(){
                this.bool = false
                console.log('我是爸爸');
             
            },
            fn1(){
                console.log('我是儿子');
             
            },
         
           },
       })
   </script>
</body>
</html>

####阻止默认行为 .prevent

@click.right.prevent 阻止右键 菜单
<input type = “submit” @click.prenent=“submitFn”> 阻止默认提交的行为

<!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>
    <style>
    
    </style>
</head>
<body>
  
    <div id="app"   @click.right.prevent>
      <input type = "submit" @click.prenent="submitFn">  
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
//阻止事件冒泡
       new Vue({
           el:"#app",
           data(){
               return{
                   bool:true,
               }
           },
           methods: {
            submitFn(){
             //请求操作
             
            },
         
         
           },
       })
   </script>
</body>
</html>
更多
.once

只触发一次事件函数 一次性的

<!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>

</head>
<body>
  
    <div id="app"   @click.right.prevent>
   <span @click.once="fn">once操作</span>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
//阻止事件冒泡
       new Vue({
           el:"#app",
           data(){
               return{
                   bool:true,
               }
           },
           methods: {
            fn(){
                console.log('我是爸爸！！')
            }
         
         
           },
       })
   </script>
</body>
</html>
.self

只在自身触发（子元素不能触发）.target为自己的时候 才能触发事件函数的执行

<!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>
    <style>
          .child{
          position: absolute;
          width: 200px;
          height: 200px;
          left:50%;
          top:50%;
          transform: translate(-50%,-50%);
          background-color: pink;
        }
        span{
            position: absolute;
            top:0;
            right: 0;
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>

</head>
<body>
  
    <div id="app"   @click.right.prevent>
     <p class="child" @click.self="fn">
        <span @click="fn">x</span>
     </p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
//阻止事件冒泡
       new Vue({
           el:"#app",
           data(){
               return{
                   bool:true,
               }
           },
           methods: {
            fn(){
                console.log('我是爸爸！！')
            },
            fn1(){
                console.log('我是儿子！！')
            },
         
         
           },
       })
   </script>
</body>
</html>
.passsive

事件默认行为 立即触发 无视preventDefault

<!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>
    <style>
    ul{
        height: 400px;
        background-color: red;
        overflow: auto;
    }
    li{
        height: 200px;
        width: 200px;
    }
    </style>

</head>
<body>
    <!-- 
   区分滚轮事件和滚动事件
   滚轮事件：
          只在鼠标滚轮的时候才触发


   滚动事件：
      可以触发滚轮事件，也可以按住滚动条进行事件的触发



     -->
  
    <div id="app"   @click.right.prevent>
     <ul @wheel.passive="dothing">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
     </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
//阻止事件冒泡
       new Vue({
           el:"#app",
           data(){
               return{
                   bool:true,
               }
           },
           methods: {
            fn(){
                console.log('我是爸爸！！')
            },
            fn1(){
                console.log('我是儿子！！')
            },
            dothing(){
                // 耗时操作
                for (let i = 0; i < 1000000; i++) {
                    console.log(i)
                    
                }
            }
         
           },
       })
   </script>
</body>
</html>
.capture(了解)

使用事件捕获 父传子

<!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>
    <style>
          .child{
          position: absolute;
          width: 200px;
          height: 200px;
          left:50%;
          top:50%;
          transform: translate(-50%,-50%);
          background-color: pink;
        }
        span{
            position: absolute;
            top:0;
            right: 0;
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>

</head>
<body>
  
    <div id="app"   @click.right.prevent>
     <p class="child" @click.capture="fn">
        <span @click="fn1">x</span>
     </p>
     <!-- 先触发 p 在触发  span -->
     <!-- 捕获元素   从外到内  冒泡元素  从内到外 -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
//阻止事件冒泡
       new Vue({
           el:"#app",
           data(){
               return{
                   bool:true,
               }
           },
           methods: {
            fn(){
                console.log('我是爸爸！！')
            },
            fn1(){
                console.log('我是儿子！！')
            },
         
         
           },
       })
   </script>
</body>
</html

组合使用
<span @click.stop.prevent=“fn1”>X

按键修饰符(了解)

.enter
<input type=“text” @keyup.enter=“keyUp”>

常用的按键别名
.delete
.esc
.space
.up
.down
.left
.right
.tab
page-up kebab-case(短横线命名 比如：> niHao ni-Hao)

<!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>
    <style>
        .red{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="text" @keyup.enter="keyUp">
         <!--按下enter回车的时候  才会触发事件  -->
        <!-- 可以具体到某个键，比如回车键enter -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>

       new Vue({
           el:"#app",
           data(){
               return{
                   bool:true,
               }
           },
           methods: {
            keyUp(){
                console.log("某个键触发了")
            }

           }
        
       })
   </script>
</body>
</html>
系统修饰符(了解)

.crtl
<button @click.ctrl=“fn”>点我//按下crtl键然后点击才能触发事件

.alt
.shift
.meta command 田
.exact
<button @click.ctrl.exact=“fn”>点我

<!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>
   <style>
       .red{
           background-color: red;
       }
   </style>
</head>
<body>
   <div id="app">
     <button @click.ctrl="fn">点我</button>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <script>

      new Vue({
          el:"#app",
          data(){
              return{
                  bool:true,
              }
          },
          methods: {
                fn(){
                   console.log("点我")
                }

          }
       
      })
  </script>
</body>
</html>
使用keyCode指定具体的按键（vue3已废弃了）
<!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>
    <style>
        .red{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="app">
     <input type="text" @keyup.40="keyUp">  <!--方向键下 -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>

       new Vue({
           el:"#app",
           data(){
               return{
                   bool:true,
               }
           },
           methods: {
            keyUp(){
                console.log("某个键被触发")
            },
                 fn(){
                    console.log("点我")
                 }

           }
        
       })
   </script>
</body>
</html>
自定义键名

Vue.config.keyCodes.自定义键名 = 键码

<!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>
    <style>
        .red{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="app">
     <input type="text" @keyup.downdown="keyUp">  <!--方向键下 -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
    // 自定义键名
    Vue.config.keyCodes.downdown = 40
       new Vue({
           el:"#app",
           data(){
               return{
                   bool:true,
               }
           },
           methods: {
            keyUp(){
                console.log("某个键被触发")
            },
                 fn(){
                    console.log("点我")
                 }

           }
        
       })
   </script>
</body>
</html>
列表渲染指令

v-for

遍历
in 和 of 都可以

  • {{item}}
  • //item 可以在li内使用

如果需要index

            <li v-for="(item ,index) in arr">
           索引值：{{index}} <br>
           数组项： {{item}}
        </li> 
    </ul>

    <!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>
  
</head>
<body>
    <div id="app">
        <ul>
            <!-- <li v-for="item in arr">{{item}}</li> -->
            <li v-for="(item ,index) in arr">
               索引值：{{index}} <br>
               数组项： {{item}}
            </li> 
        </ul>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
       new Vue({
           el:"#app",
           data(){
               return{
                   arr:[
                    '我','喜欢','你'
                   ]
               }
           },
           methods: {
          

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

    数据再复杂一点点

    遍历数组
    <!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>
  
</head>
<body>
    <div id="app">
        <ul>
            <!-- <li v-for="item in arr">{{item}}</li> -->
            <li v-for="(item ,index) in arr">
              <h1>{{item.name}}</h1>
              <img :src="item.image" alt="">
            </li> 
        </ul>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
       new Vue({
           el:"#app",
           data(){
               return{
                   arr:[
                    {
                        name:'张惠妹',
                        image: 'https://ts4.cn.mm.bing.net/th?id=OIP.332CUZswXIRZnvJvYjG6qgAAAA&w=298&h=204&c=12&rs=1&qlt=99&pcl=faf9f7&o=6&dpr=1.3&pid=SMRS'
                    },
                    {
                        name:'张杰',
                        image:'https://ts1.cn.mm.bing.net/th?id=OIP.A8XozsKIwHbzy2zd-4IZbgHaHa&w=298&h=204&c=12&rs=1&qlt=99&pcl=faf9f7&o=6&dpr=1.3&pid=SMRS'

                    },
                    {
                        name:'伍佰',
                        image:'https://pic.baike.soso.com/ugc/baikepic2/0/20230425201152-1339793966_jpeg_914_1344_727882.jpg/300'

                    },
                   ]
               }
           },
           methods: {
          

           }
        
       })
   </script>
</body>
</html>
    遍历对象（不常用）
    <!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>
  
</head>
<body>
    <div id="app">
        <ul>
         <li v-for="(value,key,index) in obj">
            <!-- 
                value ===> 属性值
                key ===>  属性名
                index ===> 序号

             -->
            {{value}}------{{key}}----{{index}}
         </li>
        </ul>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
       new Vue({
           el:"#app",
           data(){
               return{
                obj:{
                    name:'queque',
                    age:18
                }
                 
               }
           },
           methods: {
          

           }
        
       })
   </script>
</body>
</html>
    遍历字符串/数字（了解）
    <!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>
  
</head>
<body>
    <div id="app">
        <ul>
         <li v-for="(value,index) in num">
           
            {{value}}------{{index}}
         </li>
        </ul>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
       new Vue({
           el:"#app",
           data(){
               return{
             
                 num:15,
               }
           },
           methods: {
          

           }
        
       })
   </script>
</body>
</html>
    组件key的属性

    不使用key的情况
    往前面添加数组项的时候 input框内的 状态 会乱序了

    <!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>
  
</head>
<body>
    <!-- 
        需求：
        添加新用户，点击按钮使添加到的新用户加入list数组，并显示出来
    
    -->
    <div id="app">
        <!-- v-model双向数据的绑定 -->
        <input type="text" v-model="query">
        <button @click="addPerson">添加新用户</button>
        <ul>
      <li v-for="person in list">
        {{person.name}}<input type="text">
      </li>
        </ul>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
       new Vue({
           el:"#app",
           data(){
       
               return{
                query:'',
                list:[
                    {id:'0001',name:'朱雀·'},
                    {id:'0002',name:'丸子'},
                    {id:'0003',name:'锦鲤'},
                    {id:'0004',name:'夏至'}
                ]
                
               }
           },
           methods: {
            addPerson(){
                // this.list.push({
                //     id:'0005',
                //     name:this.query
                // })
                this.list.unshift({
                    id:'0005',
                    name:this.query
                })
            }

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

     <!-- 虚拟dom 1 
    <ul>
      <li> 0 
        朱雀 <input type="text"> //input框内 朱雀
      </li>
      <li> 1
        丸子 <input type="text"> //input框内 丸子
      </li>
      <li> 2
        锦鲤 <input type="text">//input框内 锦鲤
      </li>
      <li> 3
        夏栀 <input type="text">//input框内 夏栀
      </li>
    </ul> -->

    <!-- 虚拟dom 2  修改list之后 
    <ul>
      <li> 0 
        大宝 <input type="text"> //input框内 朱雀
      </li>
      <li> 1 
        朱雀 <input type="text">//input框内 丸子
      </li>
      <li> 2
        丸子 <input type="text">
      </li>
      <li> 3
        锦鲤 <input type="text">
      </li>
      <li> 4
        夏栀 <input type="text">
      </li>
    </ul> -->

    虚拟dom diff算法
    用上独一无二的key值

     <!-- 虚拟dom 1 
    <ul>
      <li> 1000 
        朱雀 <input type="text"> //input框内 朱雀
      </li>
      <li> 1001
        丸子 <input type="text"> //input框内 丸子
      </li>
      <li> 1002
        锦鲤 <input type="text">//input框内 锦鲤
      </li>
      <li> 1003
        夏栀 <input type="text">//input框内 夏栀
      </li>
    </ul> -->

      <!-- 虚拟dom 2 
  <ul>
    <li> 1004 
      大宝 <input type="text">
    </li>
    <li> 1000 
      朱雀 <input type="text"> //input框内 朱雀 找key为1000 
    </li>
    <li> 1001
      丸子 <input type="text"> //input框内 丸子
    </li>
    <li> 1002
      锦鲤 <input type="text">//input框内 锦鲤
    </li>
    <li> 1003
      夏栀 <input type="text">//input框内 夏栀
    </li>
  </ul> -->

    <!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>
 
</head>
<body>
   <!-- 
       需求：
       添加新用户，点击按钮使添加到的新用户加入list数组，并显示出来
   
   -->
   <div id="app">
       <!-- v-model双向数据的绑定 -->
       <input type="text" v-model="query">
       <button @click="addPerson">添加新用户</button>
       <ul>
     <li v-for="person in list"  :key="person.id">
       {{person.name}}<input type="text">
     </li>
       </ul>

   </div>
   <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <script>
      new Vue({
          el:"#app",
          data(){
      
              return{
               query:'',
               list:[
                   {id:'0001',name:'朱雀·'},
                   {id:'0002',name:'丸子'},
                   {id:'0003',name:'锦鲤'},
                   {id:'0004',name:'夏至'}
               ]
               
              }
          },
          methods: {
           addPerson(){
               // this.list.push({
               //     id:'0005',
               //     name:this.query
               // })
               this.list.unshift({
                   id:'0005',
                   name:this.query
               })
           }

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

    没有独一无二的key值 修改了数据 页面上不变的dom依旧不变顺序
    用上了独一无二的Key值 修改数据 dom里面的内容都可以跟着变顺序
    使用for 就必须使用key
    最好使用每条数据的唯一的标识 比如id 手机号 学号
    不存在对数据的逆序添加 删除等破坏顺序的操作 仅仅用于渲染展示 可以使用index 作为 key值

    评论
    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

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

    抵扣说明：

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

    余额充值