vue.js ajax

最新推荐文章于 2024-05-08 14:34:52 发布

羽湘楚

最新推荐文章于 2024-05-08 14:34:52 发布

阅读量472

点赞数

文章标签： ajax json 前端

本文链接：https://blog.csdn.net/weixin_38337068/article/details/75322010

版权

<body>
       <div id="box" :class="{box:bo}">
           <input class="a" type="text" @keyup='up($event)' v-model='mo' @keydown.down='down()' @keydown.up='upp()'/>
           <ul v-show='arr.length!=0' :class="{ul:styl}">
               <li v-for='inner in arr' :class="{et:$index==noe,'list':none}" @click='app()'> 
                   {{inner}}
               </li>
           </ul>
       </div>
   </body>
   <script src="vue.js"></script>
   <script type="text/javascript" src="vue-resource.js" ></script>
   <script>

       window.οnlοad=function(){
           new Vue({
           el:'#box',
           data:{
               mo:'',
               arr:[],
               noe:0,
               none:true,
               styl:true,
               bo:true
           },
           methods:{
               up:function(ev){ //文本框改变事件
                   if(ev.keyCode==38||ev.keyCode==40){
                       return
                   }
                   if(ev.keyCode==13){//回车键指向
                       window.open('https://www.baidu.com/s?wd='+this.mo);
                   }
                   this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
                       wd:this.mo
                   },{jsonp:'cb'}) //这里写什么是看对象前面的命名是什么例如cb=jQuery1102004767885801320193_1500365292808&_=1500365292811
                   .then(function(tr){
                       this.arr=tr.data.s//给数组添加数据
                   })

               },
               down:function(){ //键盘键向下指向keyClode=38
                   this.noe++;
                   if(this.noe==this.arr.length){
                       this.noe=0
                   }
                   this.mo=this.arr[this.noe]

               },
               upp:function(){//键盘键向上指向keyClode=40
                   this.noe--;
                   if(this.noe==-1){
                       this.noe=this.arr.length-1
                   }
                   this.mo=this.arr[this.noe]
               },
           }
           })
       }




   </script>
</html>