jsonp 跨域请求 VUE

最新推荐文章于 2024-01-31 15:37:53 发布

Lofty_ambition

最新推荐文章于 2024-01-31 15:37:53 发布

阅读量656

点赞数

CC 4.0 BY-SA版权

分类专栏： vue.js

本文链接：https://blog.youkuaiyun.com/qinchaidaren/article/details/73138647

vue.js 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个基于Vue.js的百度搜索下拉框实现案例，包括前端代码和基本交互逻辑，如输入监听、数据获取及结果显示等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度下拉框搜索框</title>
    <script src="vue.js"></script>
    <script src="vue-resource.js"></script>
    <style type="text/css">
        ul{
            width: 300px;
            overflow: hidden;
        }
        .active{
            background: #ddd;
        }
    </style>
</head>
<body>
<div id="example">
    <input type="text" v-model="msg" @keyup="get()"/>
    <input type="button" value="提交" @click="submit()"/>
    <ul>
        <li v-for="item in datalist"  @click="toUp(item)" @mouseover="hover($index)">{{item}}</li>
        <!--//item 模板语言 将数据显示到视图上 点击之后所选的项目移动到  鼠标滑过变色
        输入框中 -->
    </ul>
    <p v-show="datalist.length == 0">暂无数据.......</p>
</div>
<script>
    var vm=new Vue({
        el:"#example",
        data:{
            msg:"",
            datalist:[]//将从后台取到的数据放到数组中，然后在在页面循环显示
        },
         methods:{
             get: function () {
                 this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
                     wd:this.msg
                 },{jsonp:"cb"}).then(function (res) {
                     this.datalist=res.data.s;
                 }, function (res) {
                    alert(res.status)
                 })
             },
             submit: function () {//提交的跳转
                 window.open("https://www.baidu.com/s?wd="+this.msg);
             },
            toUp: function (value) {
                this.msg=value;
                //数组清空
                this.datalist=[];
            },
             hover: function (index) {
                 console.log(index);
//                 :class="{avtive:true}"
                 changeColor(index)

             }
         }
    });
    //在使用任何框架的时候，有的东西写不出来的时候，可以采用原声的js
    function changeColor(index){
        var oul=document.getElementsByTagName("ul")[0];
        var oLi=oul.getElementsByTagName("li");
        for(var i=0;i<oLi.length;i++){
            oLi[i].className="";
        }
        oLi[index].className="active"
    }
</script>
</body>
</html>