5. Vue 事件绑定

5. Vue 事件绑定

​ 代码演示1

  • @click单击事件
<body>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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">
    
    <button v-on:click="greet">Greetbutton>
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)
                }
            }
        }
    })

你可能感兴趣的:(Vue,基础学习)