亲宝软件园·资讯

展开

Vue.js中v-on指令用法

.NET开发菜鸟 人气:1

v-on指令

v-on指令在Vue.js中用来绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联预计,如果没有修饰符也可以省略。

用在普通元素上时,只能监听原生DOM事件。用在自定义元素组件上时,也可以监听子组件触发的自定义事件。

用法:

v-on:事件类型="函数体"

例如:点击按钮的时候执行play事件

<button v-on:click="play">点击事件</button>

注意:

在使用v-on指令绑定事件的时候,如果要执行的是无参的函数,函数体可以加括号也可以不加括号,下面的两种写法是等价的:

<button v-on:click="play()">点击事件</button>

等同于

<button v-on:click="play">点击事件</button>

 但是,如果要传递参数,则必须加括号,例如:

<button v-on:click="play(item)">点击事件</button>

上面的例子是给play函数传递item参数。

注意:v-on的缩写@

上面的代码等同于下面的代码:

<button @click="play">点击事件</button>

代码示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-on指令</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 构建vue实例
           new Vue({
               el:"#my",
               data:{
                   age:30 
               },
               // 方法
               methods:{
                   //无参
                   play:function(){
                        this.age=40;
                   },
                   // 有参
                   playWithPara:function(para){
                         this.age=para;
                   }
               }
           })
       }
    </script>
</head>
<body>
    <div id="my">
         <h1>年龄:{{age}}</h1>
         <button @click="age = 20">设置年龄为20</button>
         <button @click="play">设置年龄为40</button>
         <button @click="playWithPara(50)">根据参数设置年龄</button>
    </div>
</body>
</html>

一个按钮也可以同时绑定多个事件,例如:

<button v-on="{mouseover:onOver,mouseout:onOut}">绑定多个事件</button>

上面我们通过对象的方式绑定多个事件,对象中的键是事件的名称, 值是methods中的成员属性方法

对应的方法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-on指令</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 构建vue实例
           new Vue({
               el:"#my",
               data:{
                   age:30 
               },
               // 方法
               methods:{
                   //无参
                   play:function(){
                        this.age=40;
                   },
                   // 有参
                   playWithPara:function(para){
                         this.age=para;
                   },
                   onOver:function(){
                      var current=document.getElementById("mouse");
                      current.innerText="鼠标移入";
                   },
                   onOut:function(){
                      var current=document.getElementById("mouse");
                      current.innerText="鼠标移出";
                   }
               }
           })
       }
    </script>
</head>
<body>
    <div id="my">
         <h1>年龄:{{age}}</h1>
         <h1 id="mouse">当前鼠标动作</h1>
         <button @click="age = 20">设置年龄为20</button>
         <button @click="play">设置年龄为40</button>
         <button @click="playWithPara(50)">根据参数设置年龄</button>

         <button v-on="{mouseover:onOver,mouseout:onOut}">绑定多个事件</button>
    </div>
</body>
</html>

加载全部内容

相关教程
猜你喜欢
用户评论