整理文档,搜刮出一个使用Vue。js仿百度搜索框的实例代码,稍微整理精简一下做下分享。
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Vue demo
& lt;风格类型=" text/css "比;
.bg {
背景:# ccc;
}
& lt;/style>
& lt;脚本src=" https://cdn.bootcss.com/vue/2.1.7/vue.min.js "祝辞& lt;/script>
& lt;脚本src=" https://cdn.bootcss.com/vue-resource/1.3.1/vue-resource.min.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript祝辞
窗口。onload=function () {
新Vue ({
埃尔:“#箱”,
数据:{
inputText:”,
文字:”,
nowIndex: 1、
结果:[]
},
方法:{
显示:函数(ev) {
如果(ev)。键码38==| |电动汽车。键码==40){
如果这一点。nowIndex & lt;1){
返回;
}
如果这一点。nowIndex !=this.result。长度,,这一点。nowIndex !=1) {
这一点。inputText=this.result [this.nowIndex];
}
返回;
}
如果(ev)。键码==13){
window.open (“https://www.baidu.com/s& # 63; wd=+。inputText,“平等”);
这一点。inputText=";
}
这一点。文本=this.inputText;
http.jsonp美元。(“https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su”, {
参数:{
wd: this.inputText
},
jsonp:“cb”
})。然后(res=比;{
这一点。结果=res.data.s;
}）
},
:函数(){
this.nowIndex + +;
如果这一点。nowIndex==this.result.length) {
这一点。nowIndex=1;
这一点。inputText=this.text;
}
},
:函数(){
this.nowIndex——;
如果这一点。nowIndex & lt;1){
这一点。nowIndex=1;
返回;
}
如果这一点。nowIndex==1) {
这一点。nowIndex=this.result.length;
这一点。inputText=this.text;
}
}
}
})；
}
& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=昂凶印北?
& lt;输入类型=拔谋尽闭嘉环?扒胧淙胨阉髂谌荨皏模型=的inputText @keyup=显示(事件)美元的@keydown.down=休息()@keydown.up.prevent=?)的祝辞
& lt; ul>
& lt;李v=(项目、索引)结果:类={bg:指数==nowIndex}的祝辞
{{项}}
& lt;/li>
& lt;/ul>
& lt;/div>
& lt;/body>
& lt;/html>
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
