快捷導(dǎo)航

vue實(shí)現(xiàn)百度下拉列表交互操作示例

更新時(shí)間：2019年03月12日 12:03:47 作者：白楊-M

這篇文章主要介紹了vue實(shí)現(xiàn)百度下拉列表交互操作,結(jié)合實(shí)例形式分析了vue.js使用jsonp針對(duì)百度接口進(jìn)行交互的相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了vue實(shí)現(xiàn)百度下拉列表交互操作。分享給大家供大家參考，具體如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>m.fzitv.net 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//走到最下面那個(gè)，就返回最上面那個(gè);
            this.t1=this.myData[this.now];//搜索框的值對(duì)應(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)會(huì)默認(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)行效果。

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

解決el-menu標(biāo)題過長顯示不全問題
本文主要介紹了如何解決el-menu標(biāo)題過長顯示不全問題,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,感興趣的朋友們跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-12-12
如何解決vue項(xiàng)目打包后文件過大問題
這篇文章主要介紹了如何解決vue項(xiàng)目打包后文件過大問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
詳解vue3中setUp和reactive函數(shù)的用法
這篇文章主要介紹了vue3函數(shù)setUp和reactive函數(shù)的相關(guān)知識(shí)及setup函數(shù)和reactive函數(shù)的注意點(diǎn)，通過具體代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
2021-06-06
詳解nuxt sass全局變量(公共scss解決方案)
這篇文章主要介紹了詳解nuxt sass全局變量(公共scss解決方案)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-06-06
使用Vite2+Vue3渲染Markdown文檔的方法實(shí)踐
本文主要介紹了Vite2+Vue3渲染Markdown文檔的方法實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的可以了解一下
2021-08-08
vue鼠標(biāo)hover(懸停)改變background-color移入變色問題
這篇文章主要介紹了vue鼠標(biāo)hover(懸停)改變background-color移入變色問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue3如何將html元素變成canvas(海報(bào)生成),進(jìn)行圖片保存/截圖
這篇文章主要介紹了vue3實(shí)現(xiàn)將html元素變成canvas(海報(bào)生成),進(jìn)行圖片保存/截圖，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
element-ui中el-cascader動(dòng)態(tài)加載和默認(rèn)值詳解
vue+elementUI項(xiàng)目中el-cascader級(jí)聯(lián)選擇器使用頻率非常高,下面這篇文章主要給大家介紹了關(guān)于element-ui中el-cascader動(dòng)態(tài)加載和默認(rèn)值的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-05-05
完美解決vue中報(bào)錯(cuò)?“TypeError:?Cannot?read?properties?of?null?
這篇文章主要介紹了完美解決vue中報(bào)錯(cuò)?“TypeError:?Cannot?read?properties?of?null?(reading?‘forEach‘)“,本文給大家分享詳細(xì)解決方案，需要的朋友可以參考下
2023-02-02
解讀Vue-loader的相關(guān)知識(shí)
這篇文章主要介紹了解讀Vue-loader的相關(guān)知識(shí)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03