5. Vue 事件绑定

最新推荐文章于 2024-08-27 14:03:39 发布

heaven_dad

最新推荐文章于 2024-08-27 14:03:39 发布

阅读量153

点赞数

分类专栏： Vue 基础学习文章标签： vue js 事件绑定

本文链接：https://blog.csdn.net/heaven_dad/article/details/107674744

版权

Vue 基础学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

5. Vue 事件绑定

代码演示1

@click单击事件

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <div id="app">
        <!-- 通过按钮实现事件的绑定 -->
        <button v-on:click="search()">查询结果</button>

        <!-- 简写方式 -->
        <button @click="search()">查询结果</button>
    </div>

    <script>
        new Vue({
            el: "#app",
            data:{          
            },   

            //可以定义多个方法   
            methods: {
                search(){
                    console.log("search")
                },
                find(){
                    console.log("find")
                }
            }              
        })       
    </script>
</body>

代码演示2

<div id="example-2">
    <!-- `greet` 是在下面定义的方法名 -->
    <button v-on:click="greet">Greet</button>
</div>
<script>
    var example2 = new Vue({
        el: "#example-2",
        data: {
            name: 'Vue.js'
        },
        // 在 `methods` 对象中定义方法
        methods: { 
            greet: function (event) {
                // `this` 在方法里指向当前 Vue 实例
                alert('Hello ' + this.name + '!')
                // `event` 是原生 DOM 事件
                if (event) {
                    alert(event.target.tagName)
                }
            }
        }
    })