事件

創建 03-事件.html

需求：點擊查詢按鈕，按照輸入框中輸入的內容查找公司相關信息

在前面的例子基礎上，data節點中增加 result，增加 methods節點 并定義 search方法

data: {searchMap:{keyWord: '尚硅谷'},//查詢結果result: {} }, methods:{search(){console.log('search')//TODO} }

html中增加 button 和 p

使用?v-on?進行數件處理，v-on:click?表示處理鼠標點擊事件，事件調用的方法定義在?vue?對象聲明的?methods?節點中

<!-- v-on 指令綁定事件，click指定綁定的事件類型，事件發生時調用vue中methods節點中定義的方法 --> <button v-on:click="search()">查詢</button><p>您要查詢的是：{{searchMap.keyWord}}</p> <p><a v-bind:href="result.site" target="_blank">{{result.title}}</a></p>

完善search方法

search(){console.log('search');this.result = {"title":"尚硅谷","site":"http://www.atguigu.com"} }

簡寫

<!-- v-on 指令的簡寫形式 @ --> <button @click="search()">查詢</button>

?

總結

以上是生活随笔為你收集整理的vue绑定事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。