<!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中ajax返回的结果赋值

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

  2. vue中ajax请求发送

    示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...

  3. Vue中应用CORS实现AJAX跨域，及它在 form data 和 request payload 的小坑处理

    基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...

  4. vue中的ajax - axios

    vue中的ajax - axios axios - 简书 使用 axios 实现 ajax 方案 VUE 更好的 ajax 上传处理 axios.js vue.js 自2.0版本已经不对 vue-re ...

  5. vue中使用Ajax(axios)、vue函数中this指向问题

    Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求.Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中. axios中文文档库:http ...

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

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

  7. vue - Vue中的ajax

    只有在ajax才能找回一点点主场了,vue中的ajax一天整完,内容还行,主要是对axios的运用. 明天按理说要开始vuex了,这个从来都是只耳闻没有眼见过,明天来看看看看是个什么神奇的东西. 一. ...

  8. vue实现ajax滚动下拉加载，同时具有loading效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. Vue中结合Flask与Node.JS的异步加载功能实现文章的分页效果

    你好!欢迎阅读我的博文,你可以跳转到我的个人博客网站,会有更好的排版效果和功能. 此外,本篇博文为本人Pushy原创,如需转载请注明出处:http://blog.pushy.site/posts/15 ...

随机推荐

  1. asp .net mvc 获得用户IP

    string strHostName = System.Net.Dns.GetHostName(); //clientIPAddress是一个数组,可能有多个数据 var clientIPAddres ...

  2. 【转载】如何使用docker部署c/c++程序

    原文地址:https://blog.csdn.net/len_yue_mo_fu/article/details/80189035 Docker介绍 Docker是一个开源的容器引擎,它有助于更快地交 ...

  3. WPF 动态模拟CPU 使用率曲线图

    原文:WPF 动态模拟CPU 使用率曲线图      在工作中经常会遇到需要将一组数据绘制成曲线图的情况,最简单的方法是将数据导入Excel,然后使用绘图功能手动生成曲线图.但是如果基础数据频繁更改, ...

  4. GetDateFormat和GetTimeFormat两个API

    https://msdn.microsoft.com/en-us/library/windows/desktop/dd318086(v=vs.85).aspx

  5. SQLSTATE[HY000]: General error: 1205 Lock wait timeout exceeded; try restarting transaction 解决方法

    SHOW FULL PROCESSLIST; KILL 263071

  6. 百度蜘蛛ip段代表的不同含义

    有时候我们在分析百度蜘蛛的时候,会发现很多的ip,这些个ip地址,根据后面的参数可以发现都是百度的.刚学习SEO不久的同学肯定要问:这些ip地址到底代表什么含义,是不是不同的ip地址所代表的含义不一样 ...

  7. ORACLE 11.2.0.4 安装在 rhel6 上

    . 修改host文件,添加本机的host记录 [root@RACDG ~]# vi /etc/hosts 127.0.0.1 localhost localhost.localdomain local ...

  8. UWP-标题栏”后退“按钮

    原文:UWP-标题栏"后退"按钮 标题栏”后退“按钮,系统级导航 应用必须启用所有硬件和软件系统后退按钮的后退导航.执行此操作的方法是注册 BackRequested 事件的侦听器 ...

  9. UWP开发-在UWP中使用sqlite

    原文:UWP开发-在UWP中使用sqlite sqlite是一种轻量级的数据库,对于一些资源紧张又需要数据库的开发非常好用. SQLite 是一个开源的无服务器嵌入式数据库. 这些年来,它已作为面向存 ...

  10. Spring MVC的工作原理，我们来看看其源码实现

    前言 开心一刻 晚上陪老丈人吃饭,突然手机响了,我手贱按了免提……哥们:快出来喝酒!哥几个都在呢!我:今天不行,我现在陪老丈人吃饭呢.哥们:那你抓紧喝,我三杯白酒,把我岳父放倒了才出来的,你也快点.看 ...