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 的值作为第三个参数。
补充一个当初没细看文档的想法:在多参数的时候,将这些参数包装成 数组/对象,手动写成一个参数...逃...