vue中$event的两种用法_vue中$event用法

作者：凡人多烦事01 | 2024-02-13 01:47:54

踩

vue中$event用法

<body>
    <div id="app">
        <div>{{msg}}</div>
        <input type="text" v-bind:value="msg" v-on:input='handle'>
        <!-- 在html部分，$event可以将当前对象传递到数据部分当中(其实不写这个$event也可
        以获取到当前对象，已在浏览器中证实，应该是通过window.event这个全局变量传递到过去
        的，可以见事件函数传参.html)；
          还可以在HTML部分内联得到写法获取当前元素,这里用到的是这个时 -->
        <input type="text" v-bind:value="msg" v-on:input='msg=$event.target.value'>
        <input type="text" v-model='msg'>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        // v-model指令的本质
        // ①v-bind 是数据向HTML方向传递
        // ②v-on:input 是HTML向数据方向传递

        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello'
            },
            methods: {
                handle: function(event) {
                    // 使用输入域中的最新的数据覆盖原来的数据
                    this.msg = event.target.value;
                }
            }
        });
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<body>
    <div id="app">
        <div>{{num}}</div>
        <div>
            <!-- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 -->
            <button v-on:click='handle1'>点击1</button>
            <!-- 2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，
                 并且事件对象的名称必须是$event (其实不写这个$event也可以获取到当前对象，
                 已在浏览器中证实，应该是通过window.event这个全局变量传递到过去的)
                 传递具体的参数的时候，只能用函数调用的方式
            -->
            <button v-on:click='handle2(1,2)'>点击2</button>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                num: 0
            },
            methods: {
                handle1: function(event) {
                    console.log(event.target.innerHTML)
                },
                handle2: function(p, p1) {
                    console.log(p, p1)
                    console.log(event.target.innerHTML)
                    this.num++;
                }
            }
        });
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】