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

526互联

vue2学习按钮点击（转载）

Vue2学习笔记:v-on