Prefacio
Las propiedades calculadas y las propiedades de escucha se presentaron anteriormente. Además, Vue también proporciona filtros que se pueden usar para algunos formatos de texto comunes. Los filtros se pueden usar en dos lugares: interpolación de llaves dobles y expresiones de unión v (esta última es compatible con 2.1.0+). El filtro debe agregarse al final de la expresión de JavaScript, |indicado por el símbolo de "tubería" .
Uso básico
<body>
<div id="app">
<!-- 在双花括号中 -->
{
{message | toUpper}}<br>
<!-- 在 `v-bind` 中 -->
<input type="text" :value="'时间' | addContext">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 全局注册
Vue.filter('toUpper', function (value) {
if (!value) return ''
value = value.toString()
return value.toUpperCase()
})
var app = new Vue({
el: '#app',
data: {
message: "abcd"
},
// 局部注册
filters: {
addContext(value) {
return value + "：" + Date.now()
}
}
})
</script>
</body>
Como se muestra en el ejemplo anterior, el filtro se puede registrar local y globalmente, como una instrucción personalizada. Los filtros se pueden utilizar en dos lugares: {
{ }}y v-bind(:)expresiones. La función de filtro siempre recibe el valor de la expresión (el resultado de la cadena de operaciones anterior) como primer parámetro. En el ejemplo anterior, la función de filtro recibirá el valor antes de la tubería como primer parámetro.
Características del filtro
Mencionado anteriormente, el filtro puede ser {
{ }}, y v-bind(:)estos dos lugares, hay algunas características además del filtro:
- Puede aceptar parámetros
- Los filtros se pueden utilizar en serie
El filtro es una función de JavaScript, por lo que puede recibir parámetros, pero debe tenerse en cuenta que la función tomará el valor antes de la canalización como primer parámetro de forma predeterminada, y los parámetros personalizados seguirán:
<div id="app">
{
{message | toUpper("one","two")}}
</div>
<script>
// 定义三个参数
Vue.filter('toUpper', function (value, args1, args2) {
if (!value) return ''
value = value.toString()
return value.toUpperCase() + args1 + args2
})
</script>
Cuando definimos varios filtros, se pueden usar en serie, y los valores se pasarán uno por uno hasta el último método. Modifique el caso básico de la siguiente manera:
<div id="app">
{
{message | toUpper("one","two") | addContext}}<br>
<input type="text" :value=" 'axx' | toUpper('1','2') | addContext ">
</div>
<!--
ABCDonetwo：1610772645949to
AXX12：1610772645949
-->
Tome la entrada como ejemplo. Primero, ‘axx’transferirá toUpper()la palabra a mayúsculas y empalmará los parámetros. En este momento, devolverá AXX12, y luego pasará AXX12, addContext()empalmando la marca de tiempo y devolverá el resultado final AXX12: 1610772645949.