一、下载axios
npm install axios --save
二、在src内新建一个api文件夹 并在api文件夹下新建一个专门用来请求的文件requestList.js
requestList.js
import request from "@/utils/request" //此文件是设置请求拦截和响应拦截(可以没有)
import axios from "axios"
const baseUrl= '/api'
export default {
getComputed(data){
return request({
url:"../../static/computed.json",
method:'get',
params:data
})
}
}
三、在static中定义json文件 computed.json
computed.json
{
"list":[
{
"name": "华为",
"prace": "3128元",
"num": 10
},
{
"name": "小米",
"prace": "1345元",
"num": 10
},
{
"name": "oppo",
"prace": "1028元",
"num": 10
}
]
}
四、在components下新建一个文件computed.vue并再路由中定义
引入
const Computed = () => import(’@/components/computed’)
{
path:’/Computed’,
name:“Computed”,
component:Computed
}
五、在components下新建一个文件computed.vue
computed.vue
<template>
<div>
111
<ul>
<li v-for="item in list"
:key="item.name">
{{item.name}}--{{item.prace}}
</li>
</ul>
<!-- 次数是计算属性的一个函数 -->
<h2>小计:{{praceCom}}</h2>
</div>
</template>
<script>
//引入要请求的api
import api from '@/api/requestList.js'
export default {
data() {
return {
list:[],
}
},
created(){ this.getComputedList() },
methods:{
async getComputedList(){
await api.getComputed('暂无参数')
.then(res=>{
console.log(res,111);
this.list = res.list
})
}
},
computed:{
//这是一个事件
praceCom(){
var sum = 0;//存和
this.list.forEach(item=>{
sum+=parseFloat(item.prace)
})
return sum //此结果就是显示在页面上的praceCom
}
}
}
</script>