vue中ajax应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        span.active{
            color:red;
        }
    </style>
</head>

<body>
<div id="app">
    <div>
        <span @click="handlerClick(index)" v-for = "(category,index) in categoryList" :key="category.id" :class="{active:index==currentIndex}">
                                                                                <!--绑定属性-->
            {{ category.name }}
        </span>

    </div>

</div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src='./vue.js'></script>
<script>
    let vm = new Vue({   // 声明变量  实例化一个对象vm(指的是vue的实例)
        el: "#app",    //绑定根元素
        //数据属性
        data(){  //这里有obsever
            //返回的数据跟后端数据库里的有关,如果是动态的数据,存的是数据结构
            return {categoryList:[],currentIndex:0}
        },
        methods:{
            handlerClick(i){this.currentIndex=i;}
        },
        created(){
            $.ajax({
                //请求后端数据 ****
                url:"https://www.luffycity.com/api/v1/course_sub/category/list/",
                type:"get",
                // success:function(data){
                //后端数据渲染回来
                success:(data)=>{       //data 一般是从后端返回给前端的
                    console.log(data);

                    //Object
                        //data:(6) [{…}, {…}, {…}, {…}, {…}, {…}, __ob__: Observer]
                        //error_no:0
                        //proto__:Object

                    if (data.error_no === 0){
                        var data=data.data;
                        let obj={
                            id:0,
                            name:"全部",
                            category:"0"
                        }
                        this.categoryList = data;
                        this.categoryList.unshift(obj)
                        //把data赋值给categoryList
                        console.log(this)//拿到的是一个ajax对象,
                        // 所以把上面的匿名函数改成箭头函数

                        //改成箭头函数之后得到的是vue对象
                        this.categoryList=data;
                    }
            },

                error:function(err){
                    console.log(err);
                }
            })
        }
    })
</script>


</body>
</html>
猜你喜欢
