书忘: 在vue中如何根据请求条件例如时间类型渲染数据 书忘: 把不想要显示的全设为'-'
时间: 2023-11-22 13:52:50 浏览: 35
可以在Vue组件中使用计算属性或者方法来实现根据请求条件渲染数据。例如,可以在data中定义一个时间类型的变量,然后将请求返回的数据中符合该时间类型的数据保存到另外一个数组中,最后在模板中使用v-for指令渲染这个数组中的数据。
如果想要将不想要显示的数据设为'-',可以使用v-if或者三元表达式来实现。例如,在模板中使用v-if判断数据是否为空,如果为空则显示'-',否则显示实际数据。代码示例如下:
```html
<template>
<div>
<table>
<thead>
<tr>
<th>时间</th>
<th>数据</th>
</tr>
</thead>
<tbody>
<tr v-for="item in filteredData" :key="item.id">
<td>{{ item.time }}</td>
<td v-if="item.data">{{ item.data }}</td>
<td v-else>-</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
timeType: 'week', // 时间类型
data: [], // 请求返回的数据
}
},
computed: {
filteredData() {
// 根据时间类型过滤数据
return this.data.filter(item => item.timeType === this.timeType)
}
}
}
</script>
```