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> <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代码运行工具测试上述代码,可得如下运行结果:

vue数据操作之点击事件实现num加减功能示例

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/cebb545c6e40a8fc33be2813a334c9b1.html