javascript - AngularJS 中值 ="{{ var }} "和 [value] ="var"之间的差异

Question

有人可以向我解释一下两者之间的区别吗

value="{{var}}" vs [value]="var"

谢谢。

Answer 1

根据https://angular.io/guide/template-syntax#a-new-mental-model

2种括号类型代表2种不同的数据流方向。

[target]="expression"大声朗读为“绑定(bind)目标”，(target)="statement"朗读为“目标上”

绑定(bind)目标，将您的 JavaScript 模型绑定(bind)到您的 View 。

在目标上，在 View 更改时向您的 JavaScript 模型引发一个事件。

您可以将它们组合起来创建绑定(bind)目标，这两者都可以实现。

https://angular.io/guide/template-syntax#property-binding-or-interpolation

value="{{var}}"是插值绑定(bind)。它的使用方式与 [attr.value]="var"

相同

有这些细微的差别。

value="{{var}}"或在 html 节点内容中使用 {{}} 只适用于字符串。

事实上，Angular 中存在 {{ }} 意味着他们需要做更多处理模板的工作，但由于这项工作已经沉没，你可以随意使用 {{ }} ，它更有意义并提高可读性，而无需性能受到很大影响。

如果您需要绑定(bind)到非字符串属性，则需要使用属性绑定(bind)语法。

我建议坚持使用属性绑定(bind)语法[value] = "var"，因为它允许您使用 2 个不同的方向绑定(bind)，而无需太多的心理开销。