zoukankan      html  css  js  c++  java
  • $on在构造器外部添加事件$once执行一次的事件$off关闭事件

    $on  在构造器外部添加事件。
    $on接收两个参数,第一个参数是调用时的事件名称,第二个参数是一个匿名方法。
    如果按钮在作用域外部,可以利用$emit来执行。

    html
     <div id="app">
                <span>{{message}}</span>
                <button @click="add()">+1</button>
      </div>
         <p><button onclick="reduce()">减少</button></p>
         <p><button onclick="reduceOnce()">执行一次减少</button></p>
         <p><button onclick="off()">关闭</button></p>

    js

    var vm = new Vue({
        el:"#app",
        data:{
            message:1
        },
        methods:{
           add:function(){
             this.message++
           }
        }
    })
    // 实例事件
    vm.$on('reduce',function(){
        this.message--
    })
     //只使用一次的实例方法
     vm.$once('reduceOnce',function(){
          this.message--;
     })
     // 关闭事件
     function off(){
        vm.$off('reduce');
     }
    
    // 外部调用内部事件
    function reduce(){
        vm.$emit('reduce')
    }
    function reduceOnce(){
      vm.$emit('reduceOnce');
    }
     
  • 相关阅读:
    ORM补充文件
    auth.User.groups: (fields.E304) Reverse accessor for 'User.groups'
    JS BOM和DOM
    ctrl+shift+上箭头 改变代码位置
    盒子半透明
    多背景颜色写图片后面
    心跳
    动画
    仿站小工具哈哈哈
    旋转案例
  • 原文地址:https://www.cnblogs.com/ysx215/p/9408638.html
Copyright © 2011-2022 走看看