vue键盘事件， 监听事件 ，
监听要创建 script标签
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><style>* {padding: 0;margin: 0;}input {outline: none;border: none;}ul li {list-style: none;}#app {margin: 40px auto;width: 400px;height: 240px;}#app input {width: 395px;height: 30px;border: 2px solid #ccc;}#app ul {width: 400px;height: 100%;}.background {background-color: rgb155, 151, 151, 0.3);}.bgc {background-color: lightsteelblue;}</style>
</head><body><div id="app"><input type="text " @keydown.down="down" @keydown.up="up" @keydown.13="enter" v-model="desc"><ul :class="{background:this.desc}"><li v-for="item,index) in result" :key="item" :class="{bgc:index===n}">{{item[0]}}</li></ul></div><script>//创建Vue实例,得到 ViewModellet vm = new Vue{el: '#app',data: {desc: '',result: [],n: -1},methods: {down){if this.n >= this.result.length) {this.n = -1;}this.n++;},up){ifthis.n<0){this.n=this.result.length;}this.n--;},enter) {ifthis.n !=-1 || this.n==this.result.length){window.location.href="https://s.taobao.com/search?q="+this.desc;}else{window.location.href="https://s.taobao.com/search?q="+this.result[this.n];}},},// 监听watch: {desc: function ) {// 创建script标签let oScript = document.createElement"script");// 给标签增加src属性oScript.src = "https://suggest.taobao.com/sug?code=utf-8&_ksTS=1569480588020_298&k=1&area=c2c&bucketid=20&callback=hh&q=" + this.desc;// 上树document.body.appendChildoScript);}}});function hhdata) {// console.logdata);vm.result = data.result;}</script>
</body></html>