介绍 & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;才能meta charset=癠TF-8"比;
& lt;才能title> www.jb51.net vue百度下拉列表& lt;/title>
& lt;才能style>
,,,.gray {
,,,,,背景:,# ccc;
,,,}
& lt;才能/style>
& lt;才能script src=皏ue.js"祝辞& lt;/script>
& lt;才能script src=皏ue-resource.js"祝辞& lt;/script>
& lt;才能script>
,,,window=function () {
,,,,,Vue ({new
,,,,,,,el: & # 39;身体# 39;
,,,,,,,数据:{
,,,,,,,,,myData: [],
,,,,,,,,,t1: & # 39; & # 39;
,,,,,,,,,现在:1//按上下键,当前选中
,,,,,,,},
,,,,,,,方法:{
,,,,,,,,,得到:函数(ev) {
,,,,,,,,,,,如果(ev.keyCode==38, | |, ev.keyCode==40)返回;
,,,,,,,,,,,如果(ev.keyCode==13) {
,,,,,,,,,,,,,window.open (& # 39; https://www.baidu.com/s?wd=& # 39; + this.t1);
,,,,,,,,,,,,,this.t1=& # 39; & # 39;;
,,,,,,,,,,,}
,,,,,,,,,,,这个。http.jsonp美元(& # 39;https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su& # 39;, {
,,,,,,,,,,,,,wd: this.t1
,,,,,,,,,,,},{
,,,,,,,,,,,,,jsonp: & # 39; cb # 39;
,,,,,,,,,,,})(函数(res) {
,,,,,,,,,,,,,this.myData=res.data.s;
,,,,,,,,,,,},的函数(){
,,,,,,,,,,,});
,,,,,,,,,},
,,,,,,,,,changeDown:函数(){
,,,,,,,,,,,this.now + +;
,,,,,,,,,,,如果(this.now==this.myData.length) this.now=1//走到最下面那个,就返回最上面那个;
,,,,,,,,,,,this.t1=this.myData [this.now];//搜索框的值对应变化
,,,,,,,,,},
,,,,,,,,,变速球:函数(){
,,,,,,,,,,,this.now——;
,,,,,,,,,,,如果(this.now==2) this.now=this.myData.length-1;
,,,,,,,,,,,this.t1=this.myData [this.now];
,,,,,,,,,}
,,,,,,,}
,,,,,});
,,,};
& lt;才能/script>
& lt;/head>
& lt; body>
& lt;才能div id=癰ox"比;
,,,& lt; input 类型=皌ext", v模型=皌1", @keyup=暗玫?事件)美元“,@keydown.down=癱hangeDown ()“, @keydown.up.prevent=氨渌偾?)“比;
,,,& lt; !——搜索框的光标会默认定位到文字前面,这里@keydown.up.prevent阻止默认事件——比;
,,,& lt; ul>
,,,,,& lt; li v=皏alue myData",拷贝:类=皗灰色:美元指数==现在}“比;
,,,,,,,{{value}}
,,,,,& lt;/li>
,,,& lt;/ul>
,,,& lt; p v-show=癿yData.length==0,在暂无数据……& lt;/p>
& lt;才能/div>
& lt;/body>
& lt;/html>
小编给大家分享一下vue如何实现百度下拉列表交互操作示例,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!
vue实现百度下拉列表交互操作的具体代码如下:
看完了这篇文章,相信你对“vue如何实现百度下拉列表交互操作示例”有了一定的了解,如果想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!
