vue数据操作之点击事件实现num加减功能示例
程序员文章站
2022-06-03 11:06:55
本文实例讲述了vue数据操作之点击事件实现num加减功能。分享给大家供大家参考,具体如下:
...
本文实例讲述了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.js程序设计有所帮助。