后台向vue页面传值

//向vue页面传值
//步骤1：
// 现在js文件中规定调用的后台接口查询车辆状态详细
export function listCar(query) {
return request({
url: '/mqtts/start/liststat',
method: 'get',
params: query
})
//步骤2：
//在vue页面的script下引入方法 listCar
import { listCar } from "@/api/system/start.js";//步骤3：
//调用方法
onMounted(()=>{
getListCar()
})//步骤4：
//申明使用到的变量；let修饰的动态可变参数，const修饰的静态参数
let xingshi = ref(['']);
let tingche = ref(['']);
let lixian = ref(['']);
const loading = ref(true);
//获取后台数据解析，应用
function getListCar() {
loading.value = true;
listCar().then(response => {
const rows = response.rows;
for (const row of rows) {
let carZhuangtai = row['carZhuangtai'];
let num = row['num'];
// 在这里对获取到的值进行进一步处理
if(carZhuangtai=='1'){console.log(1);tingche.value=num}if(carZhuangtai=='2'){console.log(2);lixian.value=num}if(carZhuangtai=='0'){console.log(0); xingshi.value = num;}
}
});
}//步骤5：
//将值传到页面{{ xingshi }}
<span ><el-tag class="spn" size="small">行驶:{{ xingshi }}</el-tag></span>
<span ><el-tag class="spn" size="small">停车:{{ tingche }}</el-tag></span>
<span ><el-tag class="spn" size="small">总数:</el-tag></span>
</p>
<p>
<span ><el-tag class="spn" size="small">离线:{{lixian}}</el-tag></span>

获取的数据样式；解析方法