$on  在构造器外部添加事件。
$on接收两个参数,第一个参数是调用时的事件名称,第二个参数是一个匿名方法。
如果按钮在作用域外部,可以利用$emit来执行。 html
 <div id="app">
<span>{{message}}</span>
<button @click="add()">+</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:
},
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');
}
 

随机推荐

  1. 使用GeoServer导出地图数据GeoJSON并应用

    在项目中,需要使用乡镇街道的地图边界,之前一直使用的是百度地图或Echarts地图,其没有这部分行政区的数据,需要在第三方购买数据,其提供的是shp文件 主文件:counties.shp 索引文件:c ...

  2. Mac 上卸载 Java

    如何在 Mac 上卸载 Java? 本文适用于: 平台: Macintosh OS X Java 版本: 7.0, 8.0 使用终端卸载 Oracle Java 注:要卸载 Java,必须具有管理员权 ...

  3. [正则表达式]匹配Unicode

    一.PHP[PCRE]之Unicode PCRE支持的16进制字符编码转义符有 \x00-\xFF,或\x{num},num为任意位16进制数 但并不支持\u0000-\uFFFF这的形式 PCRE运 ...

  4. docker的安装及使用

    准备工具: 系统:ubuntu18.04 docker软件包:docker-compose.tar.gz,containerd.io_1.2.4-1_amd64.deb,docker-ce-cli_1 ...

  5. php array_map与array_walk使用对比

    array_map(): 1.array_map() 函数将用户自定义函数作用到数组中的每个值上,并返回用户自定义函数作用后的带有新值的数组,若函数作用后无返回值,则对应的新值数组中为空. 2.回调函 ...

  6. java----面对对象

    面对对象: public class Demo { public static void main(String[] args){ Horse h = null; h = new Horse(); / ...

  7. spring-data-mongo的MongoTemplate开发

    spring-data-mongo的MongoTemplate开发 1.在实体类Customer.Java中引入注解表明转换方式 @Document   //文档 public class Custo ...

  8. python 读取指定div的内容

    # -*- coding:utf-8 -*- from bs4 import BeautifulSoup import urllib.request import re # 如果是网址,可以用这个办法 ...

  9. 获取git更新文件

    #获取最后一个版本的更新日志workspace2=/testtemplogdir=/testtmprm -rf ${logdir}/change.loggit diff --stat $GIT_PRE ...

  10. Python内置模块之random

    random的方法有 random.random # 返回一个随机的小数 ramdom.uniform # 按照一个区间返回一个小数 random.randint # 返回一个整数 random.ra ...