Vue之仿百度搜索框

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width, in...

weixin_30800987

251人浏览 · 2017-10-22 11:37:00

weixin_30800987 · 2017-10-22 11:37:00 发布

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title></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="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;  
  
                        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">暂无数据...</p>  
    </div>  
</body>  
</html>

知识点：

1.使用v-show:数据长度为0的时候显示‘暂无数据’
2.使用jsonp获取数据

3.键盘事件keydown.down keydown.up按键向上向下的按键

转载于:https://www.cnblogs.com/chaofei/p/7708737.html

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^