Vue 仿百度搜索功能實(shí)現(xiàn)代碼
更新時(shí)間：2017年02月16日 08:53:15 作者：閣下長(zhǎng)的好生俊俏
本文通過(guò)實(shí)例代碼給大家介紹了vue仿百度搜索功能，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧
無(wú)上下選擇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsonp</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="../js/Vue.js"></script>
<script src="../js/vue-resource.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
myData:[],
t1:''
},
methods:{
get:function(){
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:this.t1
},{
jsonp:'cb'
}).then(function(res){
this.myData=res.data.s
},function(){
});
}
}
});
}
</script>
</head>
<body>
<div id="box">
<input type="text" v-model="t1" @keyup="get()">
<ul>
<li v-for="value in myData">{{value}}</li>
</ul>
<p v-show="myData.length==0">暫無(wú)數(shù)據(jù)...</p>
</div>
</body>
</html>
加上上下選擇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsonp</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.gray{
background: #ccc;
}
</style>
<script src="../js/vue1.0.js"></script>
<script src="../js/vue-resource.js"></script>
<script>
window.onload=function(){
new Vue({
el:'body',
data:{
myData:[],
t1:'',
now:-1
},
methods:{
get:function(ev){
if(ev.keyCode==38||ev.keyCode==40){
return;
}
if(ev.keyCode==13){
window.open('https://www.baidu.com/s?wd='+this.t1);
this.t1='';
}
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:this.t1
},{
jsonp:'cb'
}).then(function(res){
this.myData=res.data.s;
},function(){
});
},
changeDown:function(){
this.now++;
if(this.now==this.myData.length)this.now=-1;
this.t1=this.myData[this.now];
},
changeUp:function(){
this.now--;
if(this.now==-2)this.now=this.myData.length-1;
this.t1=this.myData[this.now];
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="text" v-model="t1" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()">
<ul>
<li v-for="value in myData" :class="{gray:$index==now}">{{value}}</li>
</ul>
<p v-show="myData.length==0">暫無(wú)數(shù)據(jù)...</p>
</div>
</body>
</html>
以上所述是小編給大家介紹的Vue 仿百度搜索功能實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue中keep-alive組件使用和一些基礎(chǔ)配置方法
本文主要介紹了Vue中keep-alive組件的使用方法和一些基礎(chǔ)配置,keep-alive是Vue中的一個(gè)抽象組件,可以緩存組件實(shí)例,提高性能,本文給大家介紹vue中keep-alive組件使用和一些基礎(chǔ)配置方法,感興趣的朋友一起看看吧2024-10-10
這篇文章主要介紹了vue中this.$refs的坑及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
JSON數(shù)組和JSON對(duì)象在vue中的獲取方法
這兩天在學(xué)習(xí)vue，主要是為了實(shí)現(xiàn)前后端的分離，因此數(shù)據(jù)的傳輸是必不可少的一個(gè)環(huán)節(jié)，這篇文章主要介紹了JSON數(shù)組和JSON對(duì)象在vue中的獲取方法,需要的朋友可以參考下2022-09-09
vue 自定義指令directives及其常用鉤子函數(shù)說(shuō)明
這篇文章主要介紹了vue 自定義指令directives及其常用鉤子函數(shù)說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
Vite中自制mock服務(wù)器(不使用第三方服務(wù))
本文主要介紹了Vite中自制mock服務(wù)器，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
uniapp定義new plus.nativeObj.View實(shí)現(xiàn)APP端全局彈窗功能
文章介紹了在UniApp中使用`newplus.nativeObj.View`實(shí)現(xiàn)彈窗的原因和方法,它定義了一個(gè)`AppPopupView`彈窗函數(shù),并在`main.js`中掛載到全局頁(yè)面,以便在任何地方調(diào)用,感興趣的朋友跟隨小編一起看看吧2024-11-11
Vue使用Props實(shí)現(xiàn)組件數(shù)據(jù)交互的示例代碼
在Vue中,組件的props屬性用于定義組件可以接收的外部數(shù)據(jù),這些數(shù)據(jù)來(lái)自父組件并傳遞給子組件,本文給大家介紹了Vue使用Props實(shí)現(xiàn)組件數(shù)據(jù)交互,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了vue數(shù)據(jù)更新UI不刷新顯示的解決辦法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
Vue使用new?Blob()實(shí)現(xiàn)不同類(lèi)型的文件下載功能
這篇文章主要給大家介紹了關(guān)于Vue使用new?Blob()實(shí)現(xiàn)不同類(lèi)型的文件下載功能的相關(guān)資料,在Vue項(xiàng)目中,經(jīng)常用Blob二進(jìn)制進(jìn)行文件下載功能,需要的朋友可以參考下2023-07-07
vue實(shí)現(xiàn)將自己網(wǎng)站(h5鏈接)分享到微信中形成小卡片的超詳細(xì)教程
在微信小程序中,可以很簡(jiǎn)單的分享一個(gè)頁(yè)面,比微信H5簡(jiǎn)單多了,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)將自己網(wǎng)站(h5鏈接)分享到微信中形成小卡片的超詳細(xì)教程,需要的朋友可以參考下2023-02-02