Vue010_ 过滤器
生活随笔
收集整理的這篇文章主要介紹了
Vue010_ 过滤器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
? 理解過濾器
1) 功能: 對要顯示的數據進行特定格式化后再顯示
2) 注意: 并沒有改變原本的數據, 可是產生新的對應的數據
定義和使用過濾器
1) 定義過濾器
Vue.filter(filterName, function(value[,arg1,arg2,...]){
// 進行一定的數據處理
return newValue
})
2) 使用過濾器
<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>
?
編碼示例
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><div id="demo"><p>當前時間為： {{ currentTime }}</p><p>當前時間1為：{{ currentTime | dateStr }}</p><p>當前時間2為：{{ currentTime | dateStr('YYYY-MM-DD') }}</p><p>當前時間3為：{{ currentTime | dateStr('HH:mm.ss') }}</p></div><script type="text/javascript" src="js/vue.js"></script><!-- moment.js主要是的獲取默認本地時間，進行格式化。默認是英文顯示格式，可以加入其他國家語言解析。 --><script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.19.0/moment.js"></script><script>//注冊過濾器Vue.filVue.filter('dateStr',function(value,format){return moment(value).format(format || 'YYYY-MM-DD HH.mm.ss')})new Vue({el: '#demo',data: {currentTime: new Date}})</script></body> </html>結果展示
?
?
總結
以上是生活随笔為你收集整理的Vue010_ 过滤器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue009_过渡动画
- 下一篇： Vue011_ 内置指令与自定义指令