vue中ajax应用
<!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应用的更多相关文章
- Vue中ajax返回的结果赋值
这是第二次在项目中遇到此问题,ajax请求成功后在success函数中为Vue实例data里的变量赋值,却失败了 new Vue({ el:'#app', data:{ msg:'' }, creat ...
- vue中ajax请求发送
示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...
- Vue中应用CORS实现AJAX跨域，及它在 form data 和 request payload 的小坑处理
基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...
- vue中的ajax - axios
vue中的ajax - axios axios - 简书 使用 axios 实现 ajax 方案 VUE 更好的 ajax 上传处理 axios.js vue.js 自2.0版本已经不对 vue-re ...
- vue中使用Ajax(axios)、vue函数中this指向问题
Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求.Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中. axios中文文档库:http ...
- Vue中使用axios发送ajax请求
作为前后端交互的重要技巧--发送ajax请求,在Vue中我们使用axio来完成这一需求: 首先是下载axios的依赖, npm install --save axios vue-axios 然后在ma ...
- vue - Vue中的ajax
只有在ajax才能找回一点点主场了,vue中的ajax一天整完,内容还行,主要是对axios的运用. 明天按理说要开始vuex了,这个从来都是只耳闻没有眼见过,明天来看看看看是个什么神奇的东西. 一. ...
- vue实现ajax滚动下拉加载，同时具有loading效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Vue中结合Flask与Node.JS的异步加载功能实现文章的分页效果
你好!欢迎阅读我的博文,你可以跳转到我的个人博客网站,会有更好的排版效果和功能. 此外,本篇博文为本人Pushy原创,如需转载请注明出处:http://blog.pushy.site/posts/15 ...
随机推荐
- Ubuntu 15.04 clang++ 3.6 编译boost 1.59/1.55
Ubuntu 15.04已经可以直接通过apt-get insall 安装clang 3.6, 并且预装的gcc版本是4.9.2.这些安装过程在这里介绍. 首先下载boost源码 wget -O bo ...
- Emgu-WPF学习使用-中值模糊
原文:Emgu-WPF学习使用-中值模糊 实现效果: 实现途径: 前提:Image File-> System.Drawing.Bitmap->Image<Bgr, byte> ...
- Binding的三种方式
1 Text="{Binding Name}" Name为后台的属性 2 Text="{Binding ElementName=XXX,Path=A.B.C.D….}&q ...
- DirectX 图形流水线
Direct3D 的可编程流水线用来为实时游戏渲染图形(一个词概括——实时渲染) 上面的图是Dx11的实时渲染流水线,Dx的几个版本都是向下兼容的. Input-Assembler Stage: 输入 ...
- RelativeSource 简述
原文:RelativeSource 简述 RelativeSource实现标记扩展,以描述绑定源相对于绑定目标的位置. <Binding> <Binding.RelativeSour ...
- generate eml file
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...
- Win10《芒果TV》内测版现已支持在国行版 Xbox One 下载体验
Win10<芒果TV>内测版现已支持在国行版 Xbox One 下载体验 关于国行为什么无法从商店下载安装芒果TV内测版(来自微软) 1.截至到目前<芒果TV - Preview&g ...
- Qt-vs-addin失效的问题
Qt-vs-addin的小问题 使用Visual Studio进行Qt开发的时候,需要安装一个插件.然而有时候这个插件的一些工具却莫名其妙的失效: 其中qt5appwrapper.exe用于编辑Qt工 ...
- WPF Build Action
None: The file is not included in the project output group and is not compiled in the build process. ...
- UBUNTU 16.04 + CUDA8.0 + CUDNN6.0 + OPENCV3.2 + MKL +CAFFE + tensorflow
首先说一下自己机子的配置 CPU:Intel(R) Core(TM) i5-5600 CUP @3.20GHz *4 GPU : GTX 1060 OS : 64bit Ubuntu16.04LTS ...