菜单切换
FACESOHO知行者
心灵
记录
远方
赞赏工具
源代码：
点击运行
保存
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <div id="counter-event-example"> <p>{{ total }}</p> <button-counter v-on:increment="incrementTotal"></button-counter><br/> <button-counter v-on:increment="incrementTotal"></button-counter> </div> </div> <script> Vue.component('button-counter', { template:'<div><button v-on:click="incrementHandler(1)">-</button>{{ counter }}<button v-on:click="incrementHandler(2)">+</button></div>', data:function () { return {counter:0 } }, methods:{ incrementHandler:function (v) { if(v==1){ this.counter -= 1 this.$emit('increment',[1]) }else{ this.counter += 1 this.$emit('increment',[2]) }} }, }) new Vue({ el:'#counter-event-example', data:{ total:0 }, methods:{ incrementTotal:function (d) { if(d==1){ this.total -= 1 }else{ this.total += 1 } } } }) </script> </body> </html>
运行结果