iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 8
0
自我挑戰組

與Vue相遇系列 第 8

Day08-利用Computed&Filter屬性

  • 分享至 

  • xImage
  •  

又到了與Vue見面的時候,昨日完成了toDoList後,還想知道Vue有什麼特別的~

Vue:相信你已經開始熟悉Vue的操作,聽你上次說,客戶對於數據上,有很長幅度的改動及計算對吧?

我:是的!!客戶對於從後台拉過來的數據,時常也需要做計算處裡。

Vue:如果是這樣的話,對於data的屬性需要再做改變。這時候你可以使用看看Vue中的Computed及Filters屬性。

對於從後台數據庫拉出的資料,在data中,存放變數資料不變的情況下,Computed可以說是非常好用!!例如想將number和product兩組資料合而為一:

new Vue({
        el: "#app",
        data() {
            return {
                number: '01',
                product: "Apple Watch"
            }
        },

如果是平常的情況下,可能你需要設置其他變數,來存放新的資料。但有了Computed後,就可以透過Computed建立一個方法,並回傳出新的資料:

computed: {
            combinNumProd() {
                return this.number + this.product
            }
        }

https://ithelp.ithome.com.tw/upload/images/20200922/20130654ILASwd8rju.jpg
Vue:是不是很方便呢?至於filters,我們常用來加工既有的資料,像是從後台拉出來的時間,要轉換成JavaScript格式,又或者是在data屬性或Computed屬性所生成的資料進行加工,都可以使用filters來進行:

像是,我們希望在剛剛所合併的新資料中,後面加上dash並給予兩個!!如下:
https://ithelp.ithome.com.tw/upload/images/20200922/20130654vdvrHuWaZd.jpg
此時,只要在filters下,新增一個方法,並將新的方法插值到模板中:

filters: {
            addDashNub(str) {
                return str + "-!!"
            }
        }

HTML:

<div id="app">
        <h2>{{combinNumProd |addDashNub}}</h2>
</div>

Vue:這樣,你就可以將既有的資料直接做轉換了!!去試試看吧!

待續......


上一篇
Day07-toDoLis實做
下一篇
Day09-watch監聽資料
系列文
與Vue相遇30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言