首页 > 代码库 > Vue - methods 方法

Vue - methods 方法

2024-10-30 22:03:02   213人阅读

一、methods中参数的传递

使用方法和正常的javascript传递参数的方法一样，分为两部：

1、在methods的方法中进行声明，比如我们给add方法加上一个num参数，就要写出add:function(num){}.

2、调用方法时直接传递，比如我们要传递2这个参数，我们在button上就直接可以写。<button @click=”add(2)”></button>.

现在知道了加参数的方法，看一段完整的代码，代码中给add添加了num参数，并在按钮上调用传递了。

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>methods Option</title>
</head>
<body>
    <h1>methods Option</h1>
    <hr>
    <div id="app">
        {{ a }}
        <p><button @click="add(2)">add</button></p>
    </div>
 
    <script type="text/javascript">
        var app=new Vue({
            el:‘#app‘,
            data:{
                a:1
            },
            methods:{
                add:function(num){
                    if(num!=‘‘){this.a+=num}
                    else{this.a++}
                }
            }
        })
    </script>
</body>
</html>

这时，再点击按钮是每次加2个数字。

二、methods中的$event参数

传递的$event参数都是关于你点击鼠标的一些事件和属性。我们先看看传递的方法。

传递：<button @click=”add(2,$event)”>add</button> 。

我们这时候可以打印一下，看看event到底是个怎样的对象。你会发现，它包含了大部分鼠标事件的属性。

技术分享

三、native  给组件绑定构造器里的原生事件。

在实际开发中经常需要把某个按钮封装成组件，然后反复使用，如何让组件调用构造器里的方法，而不是组件里的方法。就需要用到我们的.native修饰器了。

现在我们把我们的add按钮封装成组件：

声明btn对象：

 
1
2
3
var btn={
    template:`<button>组件Add</button>`    
}

在构造器里声明：

 
1
2
3
components:{
    "btn":btn
}

用.native修饰器来调用构造器里的add方法

 
1
<p><btn @click.native="add(3)"></btn></p>

 

四、作用域外部调用构造器里的方法

这种不经常使用，如果你出现了这种情况，说明你的代码组织不够好。

 
1
<button onclick="app.add(4)" >外部调用构造器里的方法</button>

Vue - methods 方法


联系
我们