vue中避免在艾v-for中使用v-if
<template> <ul> <li v-for="products in productsOnSale" :key="product._id"> {{ product.name }} </li> </ul> </template> <script> export default { data () { return { products: [] } }, computed: { productsOnSale: function () { return this.products.filter(product => product.onSale) } } } </script>
<template> <ul> <li v-for="products in productsOnSale(50))" :key="product._id"> {{ product.name }} </li> </ul> </template> <script> export default { data () { return { products: [] } }, methods: { productsOnSale (maxPrice) { return this.products.filter(product => product.onSale && product.price < maxPrice) } } } </script>