filtre
Les filtres peuvent être utilisés à deux endroits : interpolation à double accolade et expressions v-bind
(cette dernière est prise en charge à partir de la version 2.1.0+). Les filtres doivent être ajoutés à la fin de l'expression JavaScript, indiqué par le symbole "pipe" : v-bind
表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:
<!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId"></div>
你可以在一个组件的选项中定义本地的过滤器:
filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } }
或者在创建 Vue 实例之前全局定义过滤器:
Vue.filter('capitalize', function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) }) new Vue({ // ... })
当全局过滤器和局部过滤器重名时,会采用局部过滤器。
下面这个例子用到了 capitalize
过滤器:
过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中,capitalize
过滤器函数将会收到 message
的值作为第一个参数。
过滤器可以串联:
{{ message | filterA | filterB }}
在这个例子中,filterA
被定义为接收单个参数的过滤器函数,表达式 message
的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB
,将 filterA
的结果传递到 filterB
中。
过滤器是 JavaScript 函数,因此可以接收参数:
{{ message | filterA('arg1', arg2) }}
这里,filterA 被定义为接收三个参数的过滤器函数。其中 message
的值作为第一个参数,普通字符串 'arg1'
作为第二个参数,表达式 arg2
rrreee
rrreee
ou définir le filtre globalement avant de créer l'instance Vue :
rrreee
Lorsque le filtre global et le filtre local portent le même nom, le filtre local sera utilisé. 🎜🎜L'exemple suivant utilise le filtrecapitalize
: 🎜🎜🎜🎜La fonction de filtre reçoit toujours la valeur de l'expression (le résultat de la chaîne d'opérations précédente) comme premier paramètre. Dans l'exemple ci-dessus, la fonction de filtre capitalize
recevra la valeur de message
comme premier paramètre. 🎜🎜Les filtres peuvent être concaténés : 🎜rrreee🎜Dans cet exemple, filterA
est défini comme une fonction de filtre qui reçoit un seul paramètre, et la valeur de l'expression message
sera passé en paramètre dans la fonction. Continuez ensuite à appeler la fonction de filtre filterB
, qui est également définie pour recevoir un seul paramètre, en passant le résultat de filterA
dans filterB
. 🎜🎜Les filtres sont des fonctions JavaScript et peuvent donc recevoir des paramètres : 🎜rrreee🎜Ici, filterA est défini comme une fonction de filtre qui reçoit trois paramètres. La valeur de message
est utilisée comme premier paramètre, la chaîne ordinaire 'arg1'
est utilisée comme deuxième paramètre et la valeur de l'expression arg2 code> est utilisé comme deuxième paramètre. 🎜🎜🎜🎜🎜 🎜