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 ...
随机推荐
- NPM镜像设置方法！
使用npm安装一些包失败了的看过来(npm国内镜像介绍) 发布于 2012-4-26 04:19 最后一次编辑是 2013-12-11 23:21 这个也是网上搜的,亲自试过,非常好用! 镜像使用方法 ...
- wpf 快速建立可以拖动对象
1.引用两个.net 程序集 2.xaml name space导入 xmlns:i ="http://schemas.microsoft.com/expression/2010/inter ...
- Microsoft Enterprise Library 5.0 系列(三)
一.简介及用途 在实际的项目开发中,我们总会需要对数据进行验证,以保证数据的可靠性,而为了使这些验证可以在不同的地方进行复用(如winform.web.WPF等),就需要将验证进行封装,EntLib的 ...
- selenium + ChromeDriver 实战系列之启信宝（一）
之前写了一篇selenium + ChromeDriver的一些入门的知识,这篇博客里面找了启信宝这个网站,简单的进行了一个实战练习.本篇博客的结构如下: 首先会给出一些使用seleniu ...
- 微信小程序把玩(三)tabBar底部导航
原文:微信小程序把玩(三)tabBar底部导航 tabBar相对而言用的还是比较多的,但是用起来并没有难,在app.json中配置下tabBar即可,注意tabBar至少需要两个最多五个Item选项 ...
- Win10自带应用不喜欢？一条命令全部卸载
与Win8/Win8.1一样,Win10中继续内置了应用商店,所不同的是Windows10中已升级为通用应用商店,具有跨平台特性.可能有的朋友仍不喜欢使用Modern应用,因为传统桌面应用几乎能够满足 ...
- QT5.6，5.7，5.8的新特征以及展望（Qt5.7首次正式支持Qt3D，以前都是预览版）
https://wiki.qt.io/New_Features_in_Qt_5.6 (跨平台High-DPI,改进WebEngine到45,支持WIN 10,Canvas3D,3D) https:// ...
- 支付宝RSA签名之Delphi实现
Delphi有个很大的问题就是,厂商的不作为(没有封装标准的Cipher类库),让大家自己造轮子. 今天的轮子就是RSA签名,由于Delphi没有封装Cipher类库,所以只的自己写了. 因为要在Fi ...
- 深入浅出RPC——浅出篇(转载)
本文转载自这里是原文 近几年的项目中,服务化和微服务化渐渐成为中大型分布式系统架构的主流方式,而 RPC 在其中扮演着关键的作用. 在平时的日常开发中我们都在隐式或显式的使用 RPC,一些刚入行的程序 ...
- 在Mac OSX下使用ssh建立隧道（在Windows下建立隧道可以使用putty，其间会用到ppk文件）
在Windows下建立隧道可以使用putty,其间会用到ppk文件.在Mac OSX下,同样的功能可以用ssh命令实现.具体是: ssh -D 8088 -Nf user@ip -i myppk.ss ...