<!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. window下nodejs爬取gb2312网页出现乱码的解决方案

     发布于 2012-8-22 18:15  5230 次浏览  最后一次编辑是 2013-2-18 22:31 linux环境下,我们可以通过 iconv 这个C++模块来处理Node.JS不支持的字 ...

  2. style原则问题

    就近原则 1.“行内”覆盖“嵌入”,“嵌入”覆盖“外部”Style.xml <Window.Resources> <Grid.Resources> ….中间层 <Butt ...

  3. VisualSVN-5.1.5补丁原创发布

    VisualSVN-5.1.5补丁原创发布 VisualSVN-5.1.5官方安装包.rar  VisualSVN-5.1.5Patch.rar

  4. WPF绑定到linq表达式

    using ClassLibrary;using System;using System.Collections.Generic;using System.Collections.ObjectMode ...

  5. 将自定义控件加载到RichTextbox并进行交互

    先前遇到一个问题,将自定义控件加载到RichTextbox后,无法触发自定义控件的各种事件,最终找到解决办法:设置RichTextbox的IsDocumentEnabled="True&qu ...

  6. [WPF]有Focus(), 那Unfocus()呢?

    原文:[WPF]有Focus(), 那Unfocus()呢? [WPF]有Focus(), 那Unfocus()呢? 周银辉 我们可以调用Focus()方法,让WPF控件获得焦点, 那我现在不想要焦点 ...

  7. Win8 Metro(C#)数字图像处理--2.59 P分位法图像二值化

    原文:Win8 Metro(C#)数字图像处理--2.59 P分位法图像二值化  [函数名称]   P分位法图像二值化 [算法说明]   所谓P分位法图像分割,就是在知道图像中目标所占的比率Rat ...

  8. 分布式文件系统的比较，115网盘用了fastdfs

    分布式文件系统 分布式文件系统,作为网盘的基础,应用底层文件管理.而分布式文件系统之上,用户文件的权限,用户目录管理都是由非分布式文件系统管理. 分布式文件系统需要关心的主要内容: 文件分布/数据分布 ...

  9. WPF 在一个dll创建一个Window（包含xaml），在另一个dll中再次继承 会出错

    https://social.msdn.microsoft.com/Forums/vstudio/en-US/e92390eb-bbfa-42fb-baa9-2286444c0dca/the-comp ...

  10. C++ GUID和string转化函数【转载】

    原文地址:https://blog.csdn.net/zgl7903/article/details/5488294 因为这两个函数太好用,解决了大问题,我必须转载一下了.转自csdn牛人 zgl79 ...