vue實(shí)現(xiàn)百度下拉列表交互操作示例
更新時間：2019年03月12日 12:03:47 作者：白楊-M
這篇文章主要介紹了vue實(shí)現(xiàn)百度下拉列表交互操作,結(jié)合實(shí)例形式分析了vue.js使用jsonp針對百度接口進(jìn)行交互的相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了vue實(shí)現(xiàn)百度下拉列表交互操作。分享給大家供大家參考，具體如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.dhdzp.com vue百度下拉列表</title>
<style>
.gray{
background: #ccc;
}
</style>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
window.onload=function(){
new Vue({
el:'body',
data:{
myData:[],
t1:'',
now:-1//按上下鍵，當(dāng)前選中
},
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];//搜索框的值對應(yīng)變化
},
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()">
<!--搜索框的光標(biāo)會默認(rèn)定位到文字前面，這里@keydown.up.prevent阻止默認(rèn)事件-->
<ul>
<li v-for="value in myData" :class="{gray:$index==now}">
{{value}}
</li>
</ul>
<p v-show="myData.length==0">暫無數(shù)據(jù)...</p>
</div>
</body>
</html>
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。
希望本文所述對大家vue.js程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- Vue如何實(shí)現(xiàn)驗(yàn)證碼輸入交互
- vue與iframe之間的信息交互的實(shí)現(xiàn)
- vue表單數(shù)據(jù)交互提交演示教程
- vue基礎(chǔ)之使用get、post、jsonp實(shí)現(xiàn)交互功能示例
- vue與原生app的對接交互的方法(混合開發(fā))
- vue實(shí)現(xiàn)與安卓、IOS交互的方法
- vue最簡單的前后端交互示例詳解
- vuejs前后端數(shù)據(jù)交互之從后端請求數(shù)據(jù)的實(shí)例
- vue.js與后臺數(shù)據(jù)交互的實(shí)例講解
- 如何理解Vue前后端數(shù)據(jù)交互與顯示
相關(guān)文章
本文主要介紹了如何解決el-menu標(biāo)題過長顯示不全問題,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,感興趣的朋友們跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
這篇文章主要介紹了如何解決vue項(xiàng)目打包后文件過大問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
詳解vue3中setUp和reactive函數(shù)的用法
這篇文章主要介紹了vue3函數(shù)setUp和reactive函數(shù)的相關(guān)知識及setup函數(shù)和reactive函數(shù)的注意點(diǎn)，通過具體代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2021-06-06
這篇文章主要介紹了詳解nuxt sass全局變量(公共scss解決方案)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
使用Vite2+Vue3渲染Markdown文檔的方法實(shí)踐
本文主要介紹了Vite2+Vue3渲染Markdown文檔的方法實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的可以了解一下2021-08-08
vue鼠標(biāo)hover(懸停)改變background-color移入變色問題
這篇文章主要介紹了vue鼠標(biāo)hover(懸停)改變background-color移入變色問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue3如何將html元素變成canvas(海報生成),進(jìn)行圖片保存/截圖
這篇文章主要介紹了vue3實(shí)現(xiàn)將html元素變成canvas(海報生成),進(jìn)行圖片保存/截圖，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
element-ui中el-cascader動態(tài)加載和默認(rèn)值詳解
vue+elementUI項(xiàng)目中el-cascader級聯(lián)選擇器使用頻率非常高,下面這篇文章主要給大家介紹了關(guān)于element-ui中el-cascader動態(tài)加載和默認(rèn)值的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
完美解決vue中報錯?“TypeError:?Cannot?read?properties?of?null?
這篇文章主要介紹了完美解決vue中報錯?“TypeError:?Cannot?read?properties?of?null?(reading?‘forEach‘)“,本文給大家分享詳細(xì)解決方案，需要的朋友可以參考下2023-02-02
這篇文章主要介紹了解讀Vue-loader的相關(guān)知識，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03