如何在 Vue 中过滤数组?
浏览量:129
点赞量:0
在 Vue 中过滤数组,您可以使用计算属性或方法来实现。
以下是一个使用计算属性过滤数组的示例。假设您有一个数组 `items`,您想要过滤出其中的偶数项:
```javascript
data() {
return {
items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}
},
computed: {
evenItems() {
return this.items.filter(item => item % 2 === 0)
}
}
```
在模板中使用计算属性:
```html
<ul>
<li v-for="item in evenItems" :key="item">{{ item }}</li>
</ul>
```
该模板将只渲染数组中的偶数项。
如果您需要在方法中过滤数组,可以使用与计算属性相同的过滤逻辑:
```javascript
data() {
return {
items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}
},
methods: {
filterEvenItems() {
return this.items.filter(item => item % 2 === 0)
}
}
```
在模板中使用方法:
```html
<ul>
<li v-for="item in filterEvenItems()" :key="item">{{ item }}</li>
</ul>
```
该模板也将只渲染数组中的偶数项。
说明:本站所有资源仅供学习与参考,如有侵犯您的版权,请及时联系liuqiang@zjkytwl.com,我们将尽快处理。
贡献者:
薄露如霜
邮箱:
捐赠: