溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹使用Vue怎么編寫一個百度搜索功能，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
// v-on 可簡寫為@ // 事件冒泡是指當點擊div內部的button觸發show1()時，必然會冒泡到div上執行show2()，這才層級div中很常見 // 阻止冒泡，原生js法，設置事件對象的cancelBubble屬性為true // vue方法@click.stop // 阻止默認行為，原生js法，設置事件對象的preventDefault屬性為true // vue方法@contextmenu.prevent // 鍵盤事件獲取鍵碼，原生js法，使用事件對象的keyCode屬性 // vue方法@keyup.鍵碼或鍵名,如獲取按下回車@keydown.13 或 @keydown.enter // 綁定屬性v-bind:src，簡寫 :src 只綁定一次使用v-once，將綁定內容轉義成html使用v-html
vue
$http.jsonp().then()
:class
@keyup
@keydown
配置庫文件
<script src="lib\vue.js"></script> <!-- vue本身不支持數據交互，必須引入vue-resource.js，現在vue官方也推薦axios.js--> <script src="lib\vue-resource.js"></script>
Script
<script>
window.onload = function() {
new Vue({
el: '#box',
data: {
myData: [],
content: '',
now: -1,
},
methods: {
get: function(ev) {
// 這里的鍵碼只能通過事件對象$event傳進來，因為輸入大多數鍵都應該可以進行搜素，我們要排除的就是up(38)和down(40)
if (ev.keyCode == 38 || ev.keyCode == 40) {
return;
}
// 這里當按下的鍵是Enter時，應實現搜索跳轉功能
if(ev.keyCode == 13) {
window.open('https://www.baidu.com/s?wd=' + this.content);
this.content = '';
}
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + this.content, {
jsonp: 'cb'
}).then(function(res) {
this.myData = res.data.s;
}, function() {
alert("搜索失敗");
})
},
changeDown: function() {
this.now++;
if(this.now == this.myData.length) {
this.now = -1;
}
// 這里實現輸入框中也顯示同樣的內容
this.content = this.myData[this.now];
},
changeUp: function() {
this.now--;
if (this.now == -2) {
this.now = this.myData.length;
}
this.content = this.myData[this.now];
}
},
})
}
</script>三個方法：get()用于對百度進行數據交互；cheangeDown()用于實現選中區域下移；changeUp()用于實現選中區域上移
HTML
<body>
<div id="box">
<input type="text" name="" id="" v-model="content" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up="changeUp()">
<ul>
<!-- 這里注意給class添加屬性的時候采用的是{屬性:true/false}的形式 -->
<li v-for="(item, index) in myData" :class="{grey: index==now}">
{{item}}
</li>
</ul>
<p v-show="myData.length == 0">暫無數據...</p>
</div>
</body>關于使用Vue怎么編寫一個百度搜索功能就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
