• 示例

    <!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>

vue中ajax请求发送的更多相关文章

  1. vue中采用axios发送请求及拦截器

    这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在 ...

  2. Vue中ajax返回的结果赋值

    这是第二次在项目中遇到此问题,ajax请求成功后在success函数中为Vue实例data里的变量赋值,却失败了 new Vue({ el:'#app', data:{ msg:'' }, creat ...

  3. vue中Axios请求豆瓣API数据并展示到Swipe中

    vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...

  4. IE9中ajax请求成功后返回值却是undefined

    ie9中ajax请求一般处理程序成功后返回值始终是undefined,在网上找过很多资料,大致意思都是说前后端编码不一致造成的,但是按照资料上的方案去修改却发现根本不能解决我的问题,试过好多种方案都不 ...

  5. jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法

    jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...

  6. 16 react 发送异步请求获取数据 和 使用Redux-thunk中间件进行 ajax 请求发送

    1.发送异步请求获取数据 1.引入 axios ( 使用 yarn add axios 进行安装 ) import axios from 'axios'; 2. 模拟 在元素完成挂载后加载数据 并初始 ...

  7. Vue中使用axios发送ajax请求

    作为前后端交互的重要技巧--发送ajax请求,在Vue中我们使用axio来完成这一需求: 首先是下载axios的依赖, npm install --save axios vue-axios 然后在ma ...

  8. vue中使用axios发送请求

    我们知道,vue2.0以后,vue就不再对vue-resource进行更新,而是推荐axios,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 1.安装axios cnpm ...

  9. 使用Ajax中get请求发送Token时踩的那些坑

    在使用惯了各种牛X的插件以后,在使用原生组件写一些小东西的时候总是有踩不完的坑! 今天就来说一说我使用原生ajax请求时踩得坑: 下面是我的代码: var xmlhttp; if (window.XM ...

随机推荐

  1. 报表工具和BI商业智能的区别，你真的弄清楚了吗？

    许多人在投身大数据行业的时候,肯定会听到的两个词就是"报表工具"和"BI商业智能".但是大部分人并不太清楚这两者之间的概念和区别,认为报表就是BI,BI就是报表 ...

  2. 缓冲区(buffer)与缓存(cache) 缓冲：缓解冲击，缓存：临时存储

    缓存与缓冲区 简要概述 缓存(cache):故名思意就是临时存储一下数据的存储器,其他设备可能等下还用的到数据.缓存区可以用来做缓冲区 缓冲区(Buffer):故名意思就是解决设备之间速度不匹配的问题 ...

  3. .NET 6 在小并发下如何生成唯一单据号

    一.场景介绍 小并发下要解决生成单据号的问题,会碰到哪些问题呢?,接下来让我们一探究竟[这是小并发的解决方案,大家有更好的做好可以一起讨论分享]. 之所以叫小并发:是因为确实是小并发场景的应用模式,一 ...

  4. VSCode好用的插件

    一.Chinese: 汉化 二.Live Server: Live Serve这是一个为静态和动态页面启动具有实时重新加载功能的开发本地服务器. 安装好后,在html页面右键:Open With Li ...

  5. 通过对比语法差异，让会JAVA的你快速学会Kotlin的开源宝藏项目

    今天有个小伙伴来问TJ君,说自己JAVA用的贼溜,想再学习下Kotlin,问TJ君上手难不难? 怎么说呢?其实TJ君一直觉得语言这方面,是触类旁通.一通百通的,既然JAVA已经贼溜了,想必学其他的语言 ...

  6. VUE3 之 使用标签实现动画与过渡效果（下） - 这个系列的教程通俗易懂，适合新手

    1. 概述 毛毛虫效应: 有这样一个实验,将许多毛毛虫放在一个花盆边缘,使它们首尾相接,围成一个圈.然后在离花盆很近的地方撒了一些毛毛虫的食物. 此时,毛毛虫并不会向食物的方向爬去,而是在花盆边缘,一 ...

  7. FaE：基于符号知识的适应性和可解释的神经记忆

    原创作者 | 朱林 论文解读: Facts as Experts: Adaptable and Interpretable Neural Memory over Symbolic Knowledge ...

  8. if 、whitch、for、while

    if 用于过程的判断  whitch用于值得判断 if { } else if { } else if //当此前的过程满足条件时,程序便不再判断其他过程,但是if{}if{}这样的写法程序会将每个过 ...

  9. Angular依赖注入：全面讲解（翻译中）

    在实际使用Angular依赖注入系统时,你需要知道的一切都在本文中.我们将以实用易懂并附带示例的形式解释它的所有高级概念. Angular最强大.最独特的功能之一就是它内置的依赖注入系统. 大多数时候 ...

  10. mysql 获取当前时间和时间戳

    mysql 获取当前时间为select now()运行结果: 2012-09-05 17:24:15 mysql 获取当前时间戳为select unix_timestamp(now()) 运行结果:u ...