这篇文章将为大家详细讲解有关vue如何使用点击事件实现num加减功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue num加减</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <button v-on:click="add(10)">click me</button> <button v-on:click="remove(5)">click me</button> <button v-on:click="num++">click me</button> <button v-on:click="num--">click me</button> <span>{{num}}</span> </div> <script> new Vue({ el: '#app', data: { num:0, message: '6', data: { name: '', gender: '', interest: [], identity: '' }, selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] }, methods:{ add:function (inc){ this.num += inc; }, remove:function (dec){ this.num -= dec; }, } }) </script> </body> </html>
这里使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码，可得如下运行结果：
关于“vue如何使用点击事件实现num加减功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
