文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue.js中v-on指令的用法介绍

2024-04-02 19:55

关注

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯