vue怎么过滤后端传进来的空数据
时间: 2024-05-16 10:12:48 浏览: 62
python011基于协同过滤算法的电影推荐系统带vue前后端分离毕业源码案例设计.zip
可以使用Vue.js的计算属性(computed)来过滤后端传进来的空数据。具体步骤如下:
1. 在Vue实例中定义一个计算属性,例如filteredData。
2. 在该计算属性中,通过数组的filter方法对后端传进来的数据进行过滤,将空数据排除掉。
3. 将过滤后的数据作为计算属性的返回值,供模板中的其他组件使用。
示例代码如下:
``` javascript
<template>
<div>
<ul>
<li v-for="item in filteredData" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
backendData: [
{ id: 1, name: 'Alice' },
{ id: 2, name: '' },
{ id: 3, name: 'Bob' },
{ id: 4, name: null },
],
};
},
computed: {
filteredData() {
return this.backendData.filter(item => item.name);
},
},
};
</script>
```
在上面的代码中,我们通过filter方法对后端传进来的数据进行过滤,将name为空或null的数据排除掉,最终在模板中渲染过滤后的数据。
阅读全文