04-v-on指令事件传递参数和简化写法

1、事件传递参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <h1>年龄：{{age}}</h1>

        <button v-on:click="add(15)">点击年龄加自定义数值</button>
        <button v-on:click="change(10, 'hello vue')">点击改变age和msg</button>    <!--注意hello vue用单引号-->
        <button v-on:click="change1({count: 100, msg:'你好啊啊啊'})">通过对象传参</button>
    </div>
</body>
</html>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            age: 0,
            msg: "你好"
        },
        methods: {
            add: function (count) {
                this.age += count
            },
            change: function (count, msg) {
                this.age += count;
                this.msg = msg;
            },
            change1: function (param) {
                this.age += param.count;
                this.msg = param.msg;
            }
        }
    });
</script>

2、简化写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <h1>年龄：{{age}}</h1>

        <!--调用函数的第一种方式-->
        <button v-on:click="test">点我年龄加一</button>

        <!--调用函数的第二种方式-->
        <button @click="test">点我年龄加一</button>


        <button @click="test1(123)">方法的第二种定义方式</button>
    </div>
</body>
</html>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            msg: "你好",
            age: 20
        },
        methods: {
            //方法的第一种定义方式
            test: function () {
                this.age = this.age + 1;
            },

            //方法的第二种定义方式
            test1(count){
                alert(count)
            }
        }
    });
</script>
posted @ 2021-09-21 17:30  不是孩子了  阅读(110)  评论(0)    收藏  举报