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中采用axios发送请求及拦截器
这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在 ...
- Vue中ajax返回的结果赋值
这是第二次在项目中遇到此问题,ajax请求成功后在success函数中为Vue实例data里的变量赋值,却失败了 new Vue({ el:'#app', data:{ msg:'' }, creat ...
- vue中Axios请求豆瓣API数据并展示到Swipe中
vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...
- IE9中ajax请求成功后返回值却是undefined
ie9中ajax请求一般处理程序成功后返回值始终是undefined,在网上找过很多资料,大致意思都是说前后端编码不一致造成的,但是按照资料上的方案去修改却发现根本不能解决我的问题,试过好多种方案都不 ...
- jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...
- 16 react 发送异步请求获取数据 和 使用Redux-thunk中间件进行 ajax 请求发送
1.发送异步请求获取数据 1.引入 axios ( 使用 yarn add axios 进行安装 ) import axios from 'axios'; 2. 模拟 在元素完成挂载后加载数据 并初始 ...
- Vue中使用axios发送ajax请求
作为前后端交互的重要技巧--发送ajax请求,在Vue中我们使用axio来完成这一需求: 首先是下载axios的依赖, npm install --save axios vue-axios 然后在ma ...
- vue中使用axios发送请求
我们知道,vue2.0以后,vue就不再对vue-resource进行更新,而是推荐axios,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 1.安装axios cnpm ...
- 使用Ajax中get请求发送Token时踩的那些坑
在使用惯了各种牛X的插件以后,在使用原生组件写一些小东西的时候总是有踩不完的坑! 今天就来说一说我使用原生ajax请求时踩得坑: 下面是我的代码: var xmlhttp; if (window.XM ...
随机推荐
- 一图胜千言，想让数据产生影响力，必须拥有好上手的BI数据分析工具
当杂乱无章的数据,经过数据清洗后,得到了想用的数据,但是查看这些数据通过数据库只能看到数据本身,无法看到其中的规律,可以通过BI数据分析工具,图形化展示数据,使数据更形象化的展现在用户面前,更容易看出 ...
- NFA转化为DFA
NFA(不确定的有穷自动机)转化为DFA(确定的有穷自动机) NFA转换DFA,通常是将带空串的NFA(即:ε-NFA)先转化为不带空串的NFA(即:NFA),然后再转化为DFA. 提示:ε是空串的意 ...
- 60天shell脚本计划-2/12-渐入佳境
--作者:飞翔的小胖猪 --创建时间:2021年2月1日 --修改时间:2021年2月5日 说明 每日上传更新一个shell脚本,周期为60天.如有需求的读者可根据自己实际情况选用合适的脚本,也可在评 ...
- docker配置tomcat
docker pull tomcat tomcat的目录结构 /usr/local/tomcat/webapps web目录 /usr/local/tomcat/logs 日志目录 /usr/loca ...
- Arava: 写一个控制台风格的Mp3播放器
Mp3播放器 来写一个控制台版的mp3播放器.以前很喜欢 cmd.fm 这种控制台风格的播放器. 播放mp3使用 mp3spi 库:下载mp3spi库文件,解压,拿出根目录下的 mp3spi1.9.5 ...
- 进程&线程（一）——multiprocessing,threading
本节内容为①进程线程的基础知识:②在Python的实现方法: 学习总结自: 一文看懂Python多进程与多线程编程(工作学习面试必读) - 知乎 multiprocessing 官方文档 1.进程线程 ...
- VirtualBox--修改虚拟硬盘大小
学习:Oracle VM VirtualBox做好虚拟硬盘后,如何进一步修改虚拟硬盘的大小 修改为50G,修改后在虚拟机中查看:Machine→Settings→Storage VBoxManage ...
- 【Java分享客栈】一个包装过简历的新同事写完微信支付引起事故后果断离职了
前言 挺长时间没发文了,因为公司有一个紧急项目要赶进度,加班如吃饭喝水,久违的进入到码农的状态. 之所以抽空来发个文,是这个项目才刚上线,时间不长却因为一位新同事的代码引起了生产环境的事故,造成了一批 ...
- 分析vue脚手架
执行流程: 执行npm run serve.找到了main.js文件,之后引入Vue.App等等.后来找到App组件,发现里面用到了组件School,于是执行School组件,最终汇总到App组件.通 ...
- golang 中 channel 的详细使用、使用注意事项及死锁分析
目录 1.什么是 channel,介绍管道 2.channel 的基本使用 3.channel 的使用场景 4.使用 channel的注意事项及死锁分析 什么是 channel 管道 它是一个数据管道 ...