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

Vue2学习笔记:v-on-LMLPHP

04-14 05:31