vue 列根据值转换为不同的文本
时间: 2024-03-24 20:35:38 浏览: 18
如果你想将一个列的值根据不同的条件转换为不同的文本,可以使用 Vue 的计算属性来实现。下面是一个简单的示例代码:
```html
<template>
<div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr v-for="person in people" :key="person.id">
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
<td>{{ statusText(person.status) }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
people: [
{ id: 1, name: 'Alice', age: 25, status: 'single' },
{ id: 2, name: 'Bob', age: 30, status: 'married' },
{ id: 3, name: 'Charlie', age: 35, status: 'divorced' },
],
};
},
methods: {
statusText(status) {
switch (status) {
case 'single':
return 'Single';
case 'married':
return 'Married';
case 'divorced':
return 'Divorced';
default:
return 'Unknown';
}
},
},
};
</script>
```
在上面的代码中,我们使用了一个 `statusText` 的计算属性来将每个人的婚姻状态转换为不同的文本。在模板中,我们使用了 `v-for` 指令来遍历每个人,并使用 `statusText` 方法来显示每个人的状态。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)