vue-计算属性

最新推荐文章于 2024-07-25 09:24:40 发布

Record growth...

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量49

点赞数

分类专栏： Vue 文章标签：前端

本文链接：https://blog.csdn.net/weixin_44239550/article/details/128645806

版权

Vue 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

学习记录，计算属性的用法：
下面是使用计算属性进行过滤，过滤条件就是fruit的flag是true的。

<template>
    <div>
        <h3>计算属性--过滤</h3>
        <div>处理之前：</div>
        <ul>
            <li v-for="item in zaoshi" :key="item.id"> 
                {{ item.fruit }}
            </li>
        </ul>
        <hr>
        <div>过滤之后：</div>
        <ul>
            <li v-for="item in zaoshi2" :key="item.id">
                {{ item.fruit }}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data(){
        return{
            zaoshi:[
                {

                    id: 1001,
                    fruit: "苹果",
                    flag: true
                },
                {

                    id: 225,
                    fruit: "香蕉",
                    flag: false
                },
                {

                    id: 3666,
                    fruit: "梨子",
                    flag: true
                },
                {
                    id: 5885,
                    fruit: "大菠萝🍌",
                    flag: true
                },
            ]
        }
    },
    computed:{
        // 注意zaoshi2虽然是一个值，但是没有在data中声明，使用的是括号，就跟方法一样
        zaoshi2(){
            return this.zaoshi.filter((item)=>{
                return item.flag
            })
        }
    }
}
</script>

<style>

</style>