1. 首页首页
  2. 编程日记编程日记

2025年vue.js 菜鸟教程（vue.js使用教程）

编程日记 • • 阅读 67

vue.js 菜鸟教程（vue.js使用教程）使用 vue resource 的 jsonp 处理跨域请求 div id app 请输入关键字 input type text v model keyword keyup sendJsonP keyword ul li v for r in result r li ul input div script window onload script



使用 vue-resource 的 jsonp 处理跨域请求：

<div id="app">
    请输入关键字：<input type="text" v-model="keyword" @keyup="sendJsonP(keyword)">
    <ul>
        <li v-for="r in result">{{r}}</li>
    </ul>
</div>
<script>

window.onload = function () {
  new Vue({
    el: '#app',
    data: {
      keyword: '',
      result: ''
    },
    methods: {
      sendJsonP(keyword) {
        let 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) {
            this.result = res.data.g.map(x => x['q']);
          } else {
            this.result = [];
          }
        });
      }
    }
  });
}
</script>

编程小号
上一篇 2025-06-25 19:40
下一篇 2025-08-01 18:01

相关推荐

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/bian-cheng-ri-ji/74391.html