<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车</title>
<script src="./js/vue.js"></script>
<script src="./js/axios.js"></script>
<link rel="stylesheet" href="./css/element-ui.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="container" id="app">
<h4>购物车</h4>
<!-- 购物车列表 -->
<div v-for="item in carlist">
<el-card class="box-card">
<!-- 商品图片 -->
<img :src="item.img">
<div>
<span>
<!-- 商品名称 -->
{{item.name}}
</span>
<div class="bottom clearfix">
<el-button type="text" class="button">+</el-button>
<el-button type="text" class="button">
<!-- 商品数量 -->
1
</el-button>
<el-button type="text" class="button">-</el-button>
</div>
</div>
</el-card>
</div>
</div>
</div>
<!-- 引入组件库 -->
<script src="./js/element-ui.js"></script>
<script>
new Vue({
el: "#app",
data: {
carlist: [] //购物车列表
},
created() {
// 在这里使用axios 发送请求 第一种请求方式
axios.get('carList.json').then(res=>{
console.log(res)
this.carlist = res.data
})
/** 在这里使用axios发送请求 第二种方式
* axios({methods: '请求类型',
* url: '请求的url地址'}).then((result)=>{
* .then 用来指定请求成功之后的回调函数,形参中的result 是请求成功之后的结果
* })
**/
axios({method: 'GET',url:'carList.json'}).then(res=>{
console.log(res)
})
axios({method: 'GET', url: 'carList.json'}).then((res)=>{
console.log(res)
})
//调用axios方法得到的返回值是promise对象所以该对象可以点then(function(res){})
},
})
</script>
</body>
</html> 0
点赞
收藏
分享
vue中使用axios
相关推荐
0 条评论
