$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. centos7怎么永久修改hosname

    centos7怎么永久修改hosname 其实,一般来说安装好虚拟机之后,一般都会进行修改hostname,之前也是在修改的时候,遇到过问题,但是没有深究,今天在修改的时候,好好研究了一下,之前看到好 ...

  2. Jmeter之响应结果乱码解决

    场景: 在测试过程中,我们可能需要查看结果树,但是发现里面的响应数据在“Document”以外的其他表现形式下都有乱码,如下图就是设置了以Text的形式展示,响应数据包含乱码: 分析:原因是Jmete ...

  3. JAVA实现网络文件下载

    HttpURLConnection conn = null; OutputStream outputStream = null; InputStream inputStream = null; try ...

  4. Confluence 6 计划任务

    管理员控制台能够允许你对 Confluence 运行的计划任务进行计划的调整,这些计划任务将会按照你的调整按时执行.可以按照计划执行的任务如下: Confluence 站点备份 存储优化任务,清理 C ...

  5. Confluence 6 配置数据库查询超时时间

    如果数据库的查询时间太长同时你的应用程序显示没有响应,你可以配置数据库的查询超时时间.在默认情况下 Confluence 没有超时时间.希望配置数据库查询超时时间,在你的测试服务器上进行下面的操作: ...

  6. selenium关于断言的使用

    基本介绍: Selenium工具专门为WEB应用程序编写的一个验收测试工具. Selenium的核心:browser bot,是用JAVASCRIPT编写的. Selenium工具有4种:Seleni ...

  7. gnuradio 打包脚本

    #!/bin/sh echo "cd build" cd build echo "rm -rf **" rm -rf ** echo "cmake . ...

  8. springboot集成druid+mybatis连接oracle数据库

    2.1.配置 druid 数据源 2. 随后要进行druid 的数据源的配置,如果要想使用druid 的数据源,那么首先一定要去修改 pom.xml 配置文件,引入以下包: oracle官网下载 oj ...

  9. Tensorflow 损失函数及学习率的四种改变形式

    Reference: https://blog.csdn.net/marsjhao/article/details/72630147 分类问题损失函数-交叉熵(crossentropy) 交叉熵描述的 ...

  10. Java接口自动化测试之Maven项目的创建(一)

    这里使用Idea创建Maven项目, 过程非常简单, 装好JDK和Idea 1. 安装完后,打开Idea, 选择File→New→Project, 如图 2. 选择maven, 点击Next, 如图 ...