動態變量組合的雙精度值+濾波器

<bl-card :subtitle="card.beforeChanged + ' ' + (card.changed | formatDate)" />

副標題需要通過組合兩個字符串來設定。 card.beforeChanged包含「最後更改爲：」字符串，card.changed變量包含一個datetimetring。 Via de formatDate() datetimetring被格式化爲可讀日期。

字幕現在返回：「最後更改爲：2069882880」。

問題：是否可以合併兩個字符串，其中一個字符串通過filter屬性一次性格式化？

來源

2017-04-06 Warre Buysse

有什麼問題你在你的例子做什麼？ – Bert

得到它通過一個方法的工作。計算屬性不是一個選項，因爲日期字符串來自模板中的for循環。

方法：

formatDate: (date, format) => { 
    if (!date) return '' 
    if (!format) format = 'DD.MM.YYYY' 
    return moment(date).format(format) 
}

實現：

<bl-column v-for="(card, index) in cards" :key="card.id"> 
    <bl-card :index="index" type="section" action="drawer" :title="card.titleShort" :subtitle="(card.beforeChanged || '') + ' ' + formatDate(card.changed)" /> 
</bl-column>

來源

2017-04-11 12:09:00

您應該使用computer property。

Vue.filter('formatDate', function (value) { 
 
    return moment(value).fromNow() 
 
}) 
 

 
Vue.component('todo', { 
 
    \t \t computed: { 
 
    \t formatedText: function() { 
 
     \t return `${this.text} - ${Vue.filter('formatDate')(this.date)}` 
 
    \t } 
 
    \t }, 
 
    \t \t props: ['text', 'date'], 
 
    template: '<li>{{ formatedText }}</li>' 
 
}); 
 

 
var demo = new Vue({ 
 
    el: '#demo', 
 
    data: { 
 
     todos: [ 
 
     {text:'testing', date: new Date()}, 
 
     {text:'old text', date: moment().subtract(7, 'days')} 
 
     ] 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script> 
 
<div id="demo" v-cloak> 
 
    <p v-if="!todos.length">No todos at this moment.</p> 
 
    <ul v-else> 
 
     <todo v-for="t in todos" :text=t.text :date=t.date></todo> 
 
    </ul> 
 
</div>

來源

2017-04-07 02:39:46 ridermansb

由於日期來自模板中for循環內的變量，因此這不起作用。由於計算出的屬性不接受變量，所以不起作用。 –

動態變量組合的雙精度值+濾波器

回答

相關問題