vue.js中的重新使用列表2

我使用moment.js來顯示某個事件經過了多少時間。vue.js中的重新使用列表2

我有一個列表（使用vue.js渲染）

event 3, 5 seconds ago 
event 2, 1 minute ago 
event 1, 5 minutes ago

的問題是：是不是經常更新列表（添加新項目，例如，每2分鐘）。

我想更新n (seconds|minutes) ago字符串。

我應該使用setInterval做簡單循環嗎？

for(let i = 0; i < this.list.length; i++) { 
    let item = this.list[i]; 
    item.created_at_diff = moment(item.created_at).fromNow(); 
    this.$set(this.list, i, item); 
}

還是有更好的辦法？

來源

2017-02-10 Jackson J

應該不是琴絃是用列表中的計算性能？如果是這種情況，當你改變列表時，字符串也應該改變。 – Potray

@Potray，如何編寫list'item'的計算屬性，但不是整個列表？ –

以下是您如何編寫計算屬性：https：//vuejs.org/v2/guide/computed.html#ad – Potray

這是我怎麼會做這樣的事情，告訴我，如果我錯了：

首先，我想創建一個組件，它將使定時器：

let Timer = Vue.extend({ 
    template: '#timer', 
    props: ['timestamp'], 
    data() { 
    return { 
     formatted: '' 
    } 
    }, 
    methods: { 
    format() { 
     let self = this 
     this.formatted = moment().to(moment(this.timestamp,'X')) 

     // Uncomment this line to see that reactivity works 
     // this.formatted = moment().format('X') 

     setTimeout(() => { 
     self.format() 
     },500) 
    } 
    }, 
    created() { 
    this.format() 
    } 
})

計時器需要一個屬性，以秒爲單位的UNIX時間戳。該組件包含一個名爲format()的方法，該方法將更新組件的唯一數據formatted。該方法是遞歸的，每500ms調用一次（使用setTimeout()），如果需要，可以增大此數字。

這裏是一個的jsfiddle如果你想測試我做：

https://jsfiddle.net/54qhk08h/

來源

2017-02-10 12:53:09 Hammerbot

vue.js中的重新使用列表2

回答

相關問題