Question

我在Vue中遇到了奇怪的行为。请参阅以下vue.html代码：

<label :text= 
    "$props.information ? (($props.information.primary || $props.information.secondary) | myFilter) : `No info`">
</label>

这将无法编译，Vue会发出以下警告：

[Vue warn]: Property or method "myFilter" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in Root)

但是，当我不使用三元运算符时：

<label :text=
    "($props.information.primary || $props.information.secondary) | myFilter">
</label>

它可以正常编译，并且找到myFilter。 myFilter在boot.ts中声明。为什么它会出现在第一个示例中？范围没有区别。

Answer 1

表达式语法定义为(JavaScript expression) + (prop | filters)。过滤器只能附加到有效的JavaScript上-将过滤器引入JavaScript不会发生。

您已经可以在JavaScript表达式中使用$options.filters.myFilter(prop)。

请在这里参考： https://github.com/vuejs/vue/issues/5449#issuecomment-294337677

Answer 2

单个竖线是bitwise-or operator。 Vue进行了一些特殊的解析，以将其解释为绑定中的“过滤器管道”，但是（我推测）只是绑定表达式末尾（而不是中间）的一系列一个或多个事件出现（情况如此）与您的三元用法。

三元运算符和Vue过滤器

2 个答案: