在Vue中,{{}}中的|表示过滤器,用于对数据进行处理后再进行显示。过滤器可以用在{{}}中、v-bind中以及指令中。过滤器可以接收参数,多个参数之间用管道符号|分隔。下面是一个使用过滤器的例子:
<template>
<div>
<p>{{ message | capitalize }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'hello world'
}
},
filters: {
capitalize(value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
}
</script>
上面的例子中,我们定义了一个名为capitalize的过滤器,它将字符串的第一个字母转换为大写字母。在模板中,我们使用{{}}将message的值显示在页面上,并通过管道符号|将其传递给capitalize过滤器进行处理。