Angular React Vue 比较 – 模板篇之插值

插值是指在模板中动态地使用指定的值，本章将基于标签中最基本的文本插值和 JavaScript 表达式来对三大框架进行比较。

Angular 插值

在 Angular 中，插值使用双大括号并作为分隔符。{ {}}

文本插值

为了说明插值的工作原理，下面的代码演示了一个包含变量的 HelloWorld 组件：

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  template: `
    <p>{
  { msg }}</p>
    <div><img src="{
  { logoUrl }}" /></div>
  `
})
export class HelloWorldComponent {
  msg = 'Hello, World!';
  logoUrl = './assets/logo.png';
}

使用插值在相应的组件模板中显示 msg 变量的值：

<p>{
  { msg }}</p>

使用插值在相应的组件模板中显示 img 属性的值：

<div><img src="{
  { logoUrl }}" /></div>

虽然我们可以使用插值的方式来动态设置标签属性值，不过在 Angular 中通常使用绑定的方式来为属性赋值，更详细的说