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

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' titlewww.jb51.net vue百度下拉列表/title样式。灰色{ background : # CCC }/style script src=' http : Vue。js '/script script src=' http : Vue-resource。js '/脚本脚本窗口。onload=function(){ new Vue({ El : ' body '，data:{ myData:[]，t1: ' '，now:-1//按上下键，当前选中}，方法： { get : function(ev){ if(ev。键码==38 | | ev。键码==40)返回；如果(曾经。KeyCode==13){ window。open(' https://www .百度。com/s？wd='这个。t1)；this.t1=}这个$ http。jsonp(' https://sp 0。百度。com/5a 1 fa zu 8 aa 54 nxg ko9 wtanf6hy/su '，{ wd:this.t1 }，{ jsonp:'cb' }).然后（函数{这个。mydata=RES . data。s；}，function(){ })；}，changedown :函数(){ this。现在；如果(这个。现在==这个。我的数据。长度)这个。now=-1//走到最下面那个，就返回最上面那个；这个。t1=这个。my DATa[this。现在]；//搜索框的值对应变化}，changeup :函数(){ this。现在-；如果(这个。现在==-2)这个。现在=这个。我的数据。长度-1；这个。t1=这个。my DATa[this。现在]；} } });};/script/headbody div id='box '输入类型=' text ' v-model=' t1 ' @ key up=' get($ event)' @ key down。down=' changeDown()' @ keydown。起来。protect=' changeDown()'！-搜索框的光标会默认定位到文字前面，这里@keydown.up.prevent阻止默认事件-ul Li v-for=' my DATa中的值： class=' { gray : $ index==now } ' { { value } }/Li/ul p v-show=' my DATa。长度==0 '暂无数据./p/div/body/html

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

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