`value="todo.title"` 和 `[value]="todo.title"` 有啥区别？

Posted 2023-02-23

【中文标题】`value="todo.title"` 和 `[value]="todo.title"` 有啥区别？

【英文标题】：What's the difference between `value="todo.title"` and `[value]="todo.title"`?`value="todo.title"` 和 `[value]="todo.title"` 有什么区别？

【发布时间】：2017-02-16 23:09:39

【问题描述】：

我一直在 Angular 2 中做一个待办事项应用程序来掌握这些概念...... value="todo.title"和[value]="todo.title"有什么区别？

【参考方案1】：

来自 Angular 文档：

属性绑定还是插值？

我们经常在插值和属性绑定之间进行选择。以下绑定对做同样的事情：

<p><img src="heroImageUrl"> is the <i>interpolated</i> image.</p>
<p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p>

<p><span>"title" is the <i>interpolated</i> title.</span></p>
<p>"<span [innerhtml]="title"></span>" is the <i>property bound</i> title.</p>

在许多情况下，插值是属性绑定的便捷替代方法。事实上，Angular 在渲染视图之前会将这些插值转换为相应的属性绑定。

没有技术上的理由偏爱一种形式而不是另一种形式。我们倾向于可读性，这往往有利于插值。我们建议建立编码风格规则并选择既符合规则又感觉最适合手头任务的形式。

Link

【参考方案2】：

假设我们有这些数据

todo = 
  title: 5
;

1) value="todo.title" - 名称为 value 且值为 "todo.title" 的属性（字符串）

2) value="todo.title" - 属性，名称为value，值为"5"（始终为字符串）

template_parser.ts 方法_parseAttr

因此它不会被包含在属性中

3) [value]="todo.title" - 名称为value 且值为5（数字）的属性

因此，这些表达式之间的区别在于 插值 (value="todo.title") 中的值总是字符串化，而基本属性绑定 ([value]="todo.title") 中的值是照原样通过。