vue computed example3

1061231

by Syuan Shih

HTML

<div id="app">
    <p>原始內容：{{ content }}</p>
    <p>文章摘要：{{ summary }}</p>
</div>

JavaScript

var vm = new Vue ({
    el: '#app',
    data: {
        content: '`computed`的功能很強大，它可以對資料做處理，而且它有cache，可以避免重複處理資料，跟`filters`一樣，可以在`computed`裡放入`function`，不同的是，`computed`可以做比較複雜的資料處理。'
    },
    computed: {
        summary() {
            if (this.content.length > 30)
                return this.content.slice(0, 27) + '...';
            return this.content;
        }
    }
});