<!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应用
原文地址：https://www.cnblogs.com/kenD/p/10043341.html