vue学习笔记-计算属性

一个对象数据

data() {
        return {
            author: {
                name: 'John Doe',
                books: [
                    'Vue 2 - Advanced Guide',
                    'Vue 3 - Basic Guide',
                    'Vue 4 - The Mystery'
                ]
            }
        }
    }

实现根据对象的books属性数量显示不同文案

可以写成

<view>
    <view>Has published books:</view>
    <view>{{ author.books.length > 0 ? 'Yes' : 'No' }}</view>
</view>

 

使用计算属性的实现

    <template>
        <view>
            <view>OHas published books:</view>
            <view>{{ publishedBooksMessage }}</view>
        </view>
    </template>
    <script>
        export default {
            data() {
                return {
                    author: {
                        name: 'John Doe',
                        books: [
                            'Vue 2 - Advanced Guide',
                            'Vue 3 - Basic Guide',
                            'Vue 4 - The Mystery'
                        ]
                    }
                }
            },
            computed: {
                // 计算属性的 getter
                publishedBooksMessage() {
                    // `this` points to the vm instance
                    return this.author.books.length > 0 ? 'Yes' : 'No'
                }
            }
        }
    </script>