• 技术文章 >web前端 >Vue.js

    vuejs如何绑定函数

    青灯夜游青灯夜游2021-09-14 14:33:57原创292

    vuejs绑定函数的方法:1、使用“<标签名 v-on:事件名 = 函数名>”的形式来绑定;2、使用“<标签名 @事件名 = 函数名>”的形式来绑定。

    本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。

    vuejs中的事件绑定,使用<v-on:事件名 = 函数名>来完成的,这里函数名是定义在Vue实例中的methods对象中的,Vue实例可以直接访问其中的方法.

    事件绑定的方式

    (1) 内联直接把js写在标签上调用方法

     <button v-on:click="alert('hi')">执行方法的第一种写法</button>

    (2)调用methods里定义的方法

          <button v-on:click="run()">执行方法的第一种写法</button>
          <button @click="run()">执行方法的 简写 写法</button>
        export default {     
          data () { 
            return {
              msg: '你好vue',
              list:[]      
            }
          },
          methods:{
               run:function(){
                  alert('这是一个方法');
                 }
               }
     }

    方法传参,方法直接在调用时在方法内传入参数

          <button @click="deleteData('111')">执行方法传值111</button>
    
          <button @click="deleteData('222')">执行方法传值2222</button>
            deleteData(val){
                alert(val);
            },

    传入事件对象

          <button data-aid='123' @click="eventFn($event)">事件对象</button>
            eventFn(e){
              console.log(e);
              // e.srcElement  dom节点
              e.srcElement.style.background='red';
              console.log(e.srcElement.dataset.aid);  /*获取自定义属性的值*/
            }

    相关推荐:《vue.js教程

    以上就是vuejs如何绑定函数的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:vue 绑定函数
    上一篇:vue路由传值的几种方式是什么 下一篇:vue怎么读取本地文件
    线上培训班

    相关文章推荐

    • vuejs项目运行端口号哪里改• vuejs中指令和组件有什么区别• 如何运行别人的vue项目• vue路由传值的几种方式是什么

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网