vue 使用小結 2019.03

v-bind 中使用函數

:attr = 'num'

 　　如上面的例子，通常 num 是 vue 實例中 data 的值，或者是 computed 對象中的值，我們可以在具體函數中計算，改變相應的變量，以達到更改效果。

　　但是，在組件中，data 和 computed 中的變量都是（組件內）全局共享，某一處改變，其他依賴這個數據的地方也會改變，這對於需要獨立作用的地方相當不友好。

　　最近碰到一個問題，在 v-for 中 每層循環中單獨計算某個屬性的綁定值，首先想到的是  :class="{...}"  和 :style="{...}"  。這兩個屬性的綁定值是一個對象，對象的 value 可以是某個函數的返回值，這樣就可以在 methods 中定義計算函數了。但是很遺憾，vue 只對 class 和 style 做了特化，其他屬性均不支持。

　　後來，文檔中翻到了 filter 這個 api，項目中真的基本沒用到過，可行。下附官方 demo:

<!-- 在雙花括號中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | capitalize"></div>

filters: {
    capitalize: function (value) {
        // code
        return ...
    }
}

 

　　如果一個函數被限制了參數個數，那顯然不是一個可複用的函數，當然，filter 中函數也支持多參數，官方文檔摘錄如下：

{{ message | filterA('arg1', arg2) }}

這裏，filterA 被定義爲接收三個參數的過濾器函數。

message 參數不寫在調用的地方；
普通字符串 'arg1' 作爲第二個參數；
表達式 arg2 的值作爲第三個參數。

 　　補充一個當初沒細看文檔的想法：在多參數的時候，將這些參數包裝成 數組/對象，手動寫成一個參數...逃...