使用vue+百度接口实现关键词搜索

html代码块

 <div id="app">
                请输入关键词：<input type="text" v-model="keyword" @keydown="search(keyword)">
                <ul>
                    <li v-for="item in result">{{item}}</li>
                </ul>
            </div>

js代码块

new Vue({
    el: '#app',
    data: {
      keyword: '',
      result: ''
    },
    methods: {
      search(keyword) {
        const url = 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web';
        this.$http.jsonp(url, {
          params: {
            wd: keyword
          },
          jsonp: 'cb'//jsonp默认是callback,百度缩写成了cb                   }
        }).then(res => {
          if (res.data.g) {
           //console.log(res.data.g)
           this.result=res.data.g.map(function (elementOrValue) {
               return elementOrValue['q'];
           });
          } else {
            this.result = [];
          }
        });
      }
    }
  });