互動、事件修飾符練習001 仿百度搜索框
阿新 • • 發佈：2018-11-01
需求:
- 實現搜尋框的搜尋功能
a) 對使用者在輸入框內輸入的值進行雙向資料繫結
b) 點選"搜尋"按鈕,進行網路請求
c) 將請求回的資料在搜尋框下進行展示 - 實現通過方向鍵控制搜尋選項
a) 繫結上下方向鍵的處理函式
b) 對展示的資料進行樣式繫結
程式碼:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="vue.js" type="text/javascript" charset="utf-8"></script> <script src="vue-resource.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> .eee{ background-color: #eee; } </style> </head> <body> <div id="div"> <!--鍵盤監聽 --> <input type="text" v-model="word" @keydown.down.prevent='down()' @keydown.up.prevent='up()'/> <!--呼叫幾口--> <button @click="search">搜尋</button> <ul> <!--給被選中的加上底色--> <li v-for="(v,k) in arr" :class="{eee: k == key}">{{ v }}</li> </ul> </div> </body> </html> <script type="text/javascript"> var vm = new Vue({ el:'#div', data:{ arr:[], word:'', key:'0' }, methods:{ search: function(){ this.$http.jsonp('https://sug.so.360.cn/suggest',{params:{word:this.word}}).then( function(res){ this.arr = res.data.s; console.log(res); } ) }, up: function(){ this.key--; if(this.key<0){ this.key = this.arr.length-1; } }, down: function(){ this.key++; if(this.key>this.arr.length-1){ this.key = 0; } } } }) </script>