<!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里面实现以鼠标位置为中心缩放移动图片

    原文:在WPF里面实现以鼠标位置为中心缩放移动图片 在以前的文章使用WPF Resource以及Transform等技术实现鼠标控制图片缩放和移动的效果里面,介绍了如何在WPF里面移动和放大缩小图片, ...

  2. Angular升级流程

    执行命令 ng update @angular/cli --migrate-only --from=1.7.1 npm install --save-dev @angular/cli@latest 注 ...

  3. MVC EF Model First

    1 在Models下新建实体数据模型Model.edmx 2 在Model.edmx中点右键建立各个实体,增加Scalar Property 3 空白处点右键,添加关系,勾选增加外键 4 保存Mode ...

  4. sqlite查询问题，由字母大小写敏感引起

    目前做的项目之前是用mysql,这是个错误的选择,因为本身并不是服务器-客户端模式的项目,而是一个CS架构项目,mysql这种需要较繁复配置的数据库并不合适.需要的应该是sqlite这类,内嵌的数据库 ...

  5. 十个 Web 开发者熟悉的经典开源项目和工具

    摘要: 一个都不知道的算我输! 这篇文章主要列出了曾经乃至现在都十分受 Web 开发者欢迎的开源工具,相信使用开源工具的 Web 开发者会对它们感兴趣的,它们中有的甚至诞生十多年了,但仍然在发光发热. ...

  6. 在UWP 将BitmapImage转换为 WriteableBitmap

    原文: How to convert BitmapImage to WriteableBitmap in Universal application for windows 10? 您可以直接从文件将 ...

  7. 为新项目添彩的 10+ 超有用 JavaScript 库

    快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中.   <HTML开发Mac OS App 视频教程> 土豆网同步更新:http: ...

  8. Centos7安装Mysql-最方便、最快捷

    你想在Linux操作系统安装Mysql?你不想去官网下载再复制?,那就来看看我的方案,简单.快捷轻松安装.使用. 首先,检查安装情况         1.查看有没有安装过:           yum ...

  9. [2017.02.05] 阅读《Efficient C++》思维导图

  10. SYN5006型电机同步编码脉冲分配器

    SYN5006型电机同步编码脉冲分配器 编码器信号分配板增量式编码器脉冲分配器使用说明视频链接: http://www.syn029.com/h-pd-81-0_310_13_-1.html 请将此链 ...