vue实现百度下拉列表交互操作示例

2020-11-27 来源：爱go旅游网

本文实例讲述了vue实现百度下拉列表交互操作。分享给大家供大家参考，具体如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>www.gxlcms.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//按上下键，当前选中
 },
 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()">
 <!--搜索框的光标会默认定位到文字前面，这里@keydown.up.prevent阻止默认事件-->
 <ul>
 <li v-for="value in myData" :class="{gray:$index==now}">
 {{value}}
 </li>
 </ul>
 <p v-show="myData.length==0">暂无数据...</p>
 </div>
</body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

显示全文

全部栏目

vue实现百度下拉列表交互操作示例