Vue2学习笔记:v-on
Vue的事件：
v-on: click/mouseover/mouseover/mousedown/dbclick/...
下面是点击事件介绍：
1.点击事件
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> window.onload = function(){ var vm = new Vue({ el:'#box', methods:{ show:function(){ alert('这是点击事件！'); } } }); } </script> </head> <body> <div id="box"> <input type="button" value="按钮" v-on:click="show()"> </div> </body> </html>
当点击按钮的时候，弹出alert!
2.向数组添加元素
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> window.onload = function(){ var vm = new Vue({ el:'#box', data:{ arr:['1','2'] }, methods:{ add:function(){ var num = this.arr.length+1; this.arr.push(num); //给数组累加1 //这里的this就是实例化后的对象vm } } }); } </script> </head> <body> <div id="box"> <input type="button" value="按钮" v-on:click="add()"> <br /> <ul> <li v-for="value in arr">{{value}}</li> </ul> </div> </body> </html>
结果，按一次列表累加1
