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 ...
随机推荐
- EntityFrameworkCore 单表树状结构配置
数据结构 public class TreeNode { [Key] public long Id { get; set; } public string NodeName { get; set; } ...
- [ 转]Node.js模块 require和 exports
什么是模块? node.js通过实现CommonJS的Modules/1.0标准引入了模块(module)概念,模块是Node.js的基本组成部分.一个node.js文件就是一个模块,也就是说文件和模 ...
- [nginx]invalid number of arguments
invalid number of arguments nginx出现以下的错误,基本上错误的原因就是少了后面的分号导致. invalid number of arguments
- 2-22-实现jsp通过tomcat连接mysql
所有软件的版本如下: MySQL-Connector-Java: mysql-connector-java-5.1.36 Tomcat: apache-tomcat-8.0.26 JDK: jdk-8 ...
- App.xaml介绍
在App.xaml.cs中指定 public App () { InitializeComponent(); MainPage = new XamarinDemo.MainPage(); } 同时,这 ...
- Qt SQLite 批量插入优化（SQLite默认将每条语句看成单独的事务）good
使用SQLite存储数据时发现插入速度太慢,程序跑了将近五分钟才插入了不到三千条.上网查资料才发现,SQLite这种文件数据库与MySql机制不一样,每条事务都有打开和关闭文件的步骤,SQLite默认 ...
- Wow6432Node
64 位版本 Windows 中的注册表分为 32 位注册表项和 64 位注册表项.许多 32 位注册表项与其相应的 64 位注册表项同名,反之亦然. 64 位版本 Windows 包含的默认 64 ...
- PySide——Python图形化界面入门教程(五)
PySide——Python图形化界面入门教程(五) ——QListWidget 翻译自:http://pythoncentral.io/pyside-pyqt-tutorial-the-qlistw ...
- WebAPI增加Area以支持无限层级同名Controller
原文:WebAPI增加Area以支持无限层级同名Controller 微软的WebAPI默认实现逻辑 默认实现中不支持同名Controller,否则在访问时会报HttpError,在网上找到了各种路由 ...
- MySQL数据库MHA+keepalive实现
MHA(Master High Availability)目前在MySQL高可用方面是一个相对成熟的解决方案,它由日本DeNA公司youshimaton(现就职于Facebook公司)开发,是一套优秀 ...