• 示例

    <!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. DBCHM -最简单、最实用的数据库文档生成工具

    项目介绍 DBCHM 是一款数据库文档生成工具! 该工具从最初支持chm文档格式开始,通过开源,集思广益,不断改进,又陆续支持word.excel.pdf.html.xml.markdown等文档格式 ...

  2. 【C# .Net GC】后台垃圾回收

    在后台垃圾回收 (GC) 中,在进行第 2 代回收的过程中,将会根据需要收集暂时代(第 0 代和第 1 代). 后台垃圾回收是在一个或多个专用线程上执行的,具体取决于它是后台还是服务器 GC,它只适用 ...

  3. SpreadJS + GcExcel 一出，谁与争锋！全栈表格技术轻松应对复杂公式计算场景（一）

    设计思路篇 Excel是我们日常办公中最常用的电子表格程序,不仅可满足报表数据的计算需求,还可提供绘图.数据透视分析.BI和Visual Basic for Applications (VBA)宏语言 ...

  4. linux – 使用find -name命令的通配符和双引号

    转至:https://www.icode9.com/content-3-209958.html 双引号(和单引号)是否抑制了通配符扩展?如果是这样,那么为什么以下呢? find -name " ...

  5. Activity跳转显式方法及隐式方法

    1 public class AActivity extends AppCompatActivity { 2 private Button btnJump; 3 @Override 4 protect ...

  6. C++ 部分函数

    string库 1.size()与length() 字符串长,结果相同 string s; s.length(); //s.length()-1是最后一个字符的下标,而不是'\0' for(i=0;i ...

  7. zookeeper的JAVA API使用

    1.创建连接 2.创建节点 3.监听信息 Watcher.class 4.获取节点 Stat stat = new Stat(); zk.getData(Path,true,stat); 5.修改节点 ...

  8. tp5 ajax单文件上传

    HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  9. angular1使用echarts2绘制图标

    一.绘制柱状图:直接上代码 1.首先下载echarts-all文件(这里就不赘述了),然后是创建一个bar.js及内容如下: bar.js内容: var app = require("../ ...

  10. 30 面向对象编程 抽象类 abstract 修饰符可以用来修饰方法也可以修饰类

    抽象类 概念 abstract 修饰符可以用来修饰方法也可以修饰类, 如果修饰方法,那么该方法就是抽象方法: 如果修饰类,那么该类就是抽象类. 抽象类中可以没有抽象方法,但是有抽象方法的类一定要声明为 ...