<!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. 通通WPF随笔（4）——通通手写输入法（基于Tablet pc实现）

    原文:通通WPF随笔(4)--通通手写输入法(基于Tablet pc实现) 从我在博客园写第一篇博客到现在已经有1年半了,我的第一篇博客写的就是手写识别,当时,客户需求在应用中加入手写输入功能,由于第 ...

  2. DOM解析xml实现读、写、增、删、改

    qt提供了三种方式解析xml,不过如果想实现对xml文件进行增.删.改等操作,还是DOM方式最方便. 项目配置 pro文件里面添加QT+=xml include <QtXml>,也可以in ...

  3. wpf 禁用window的systemmenu

    private IntPtr WidProc(IntPtr hwnd, int msg, IntPtr wParam, IntPtr lParam, ref bool handled) { if (m ...

  4. How to manipulate pixels on a bitmap by scanline property(Ma Xiaoguang and Ma Xiaoming)

    We have been developing image processing software for above 14 years with old versions of Delphi, su ...

  5. 企业级架构 MVVM 模式指南 (WPF 和 Silverlight 实现) 译（2）

    本书包含的章节内容 第一章:表现模式,以一个例子呈献给读者表现模式的发展历程,我们会用包括MVC和MVP在内的各种方式实现一个收费项目的例子.沿此方向,我们会发现每一种模式的问题所在,这也是触发设计模 ...

  6. Cookieless.js —— 无需 Cookie 实现访客跟踪

    直击现场 https://github.com/Colex/node-cookieless Cookieless.js 是一个轻量级的使用 Etag 进行访客跟踪的 Node.js 扩展库.使用该库无 ...

  7. C#每天进步一点--事件

    事件:如果类型定义了事件成员,那么类型就可以通知其他对象发生了特定的事情.例如,Button类提供了一个名为Click的事件.应用程序中的一个或者多个对象可能想接收关于这个事件的通知,以便在Butto ...

  8. 【MyEclipse常见错误】-java.lang.NoClassDefFoundError: org/apache/juli/logging/LogFactory的解决

    ApacheJavaTomcatMyeclipse  自己前一段时间出现了这个问题,通过在网上搜索,大概知道了原因,整理下一,以供大家参考. 将项目部署好后,启动tomcat后报错,java.lang ...

  9. hadoop 数据抽取

    #!/bin/bash if [ ! -z $2 ]; then start_time=$1 end_time=$2 else starttime=`date +%Y%m%d%H%M -d '-15 ...

  10. 一、OpenScenGraph环境搭建

    1.OpenSceneGraph 3.4.0  网址  http://www.openscenegraph.org/ github源码地址 https://github.com/openscenegr ...