• 示例

    <!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. vue2项目，踩坑Jest单元测试

    目前的项目已经维护了挺久,由于客户要求,我们要为项目加上单元测试,挑选一番后选择了Jest(配置简便,开箱即用),下面记录了此次为项目添加Jest作为单元测试的经历. 安装Jest 1. 在项目目录下 ...

  2. 思迈特软件Smartbi光鲜亮丽的背后是什么在支撑？

    思迈特软件Smartbi是国内知名BI厂商,自2011年成立以来就以提升和挖掘客户的价值为使命,致力于为客户提供一站式商业智能平台和BI解决方案,发展到如今已经获得了来自国家.地方政府.国内外权威分析 ...

  3. C# Semaphore 信号量 锁 简单理解

    信号量(Semaphore) Semaphore 一般译作 信号量,它也是一种线程同步工具,主要用于多个线程对共享资源进行并行操作的一种工具类.它代表了一种许可的概念,是否允许多线程对同一资源进行操作 ...

  4. SVG小图片格式显示（字符图标，可设置title属性）

    1.HTML + Font 方式: 修改图标颜色只需修改字体颜色,修改图片大小只需修改字体大小. 关于字体图片,我们可以自己制作,也可以从网上下载 阿里巴巴矢量图库. 在线图标字体库.Icomoon. ...

  5. 《Java编程思想》学习笔记（详细）

    目录 01 对象导论 02 一切都是对象 03 操作符 04 控制执行流程 05 初始化与清理 06 访问权限控制 07 复用类(继承) 08 多态 09 接口 10 内部类 11 持有对象 12 通 ...

  6. 『无为则无心』Python日志 — 66、将日志信息保存到文件中

    目录 1.把日志信息保存到文件中 2.拓展 (1)观察代码 (2)提出问题 (3)问题说明 1.把日志信息保存到文件中 代码如下所示: """ logging模块是Pyt ...

  7. 深入Mybatis框架

    深入Mybatis框架 学习了Spring之后,我们已经了解如何将一个类作为Bean交由IoC容器管理,也就是说,现在我们可以通过更方便的方式来使用Mybatis框架,我们可以直接把SqlSessio ...

  8. Vue之路由的使用

    零.传统路由与SPA的区别 传统开发方式下,URL改变后,就会立刻发生请求去请求整个页面,这样可能请求加载的资源过多,可能会让页面出现白屏. 在SPA(Single Page Application) ...

  9. JDK下载安装与环境变量配置【全网最新】

    1.下载安装JDK 下载地址:(https://www.oracle.com/java/technologies/downloads/) 最好选择解压版,解压即可(说删就删) 解压:例如我解压目录为 ...

  10. 【架构】从instagram学习最小化IT是怎么做的

    Keep it very simple (极简主义) Don't re-invent the wheel (不重复发明轮子) Go with proven and solid technologies ...