插值是指在模板中动态地使用指定的值,本章将基于标签中最基本的文本插值和 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 中通常使用绑定的方式来为属性赋值,更详细的说明我们会在接下来的绑定一章来做详细介绍。
通过属性绑定来显示 img
属性的值:
<div><img [src]="logoUrl" /></div>
JavaScript 表达式
在 Angular 的模板中,我们可以使用 JavaScript 表达式:
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
React 插值
React 中的模板使用地是 JSX 语法,用大括号 { }
来实现插值。
文本插值
为了说明插值的工作原理,下面的代码演示了一个包含变量的 HelloWorld 组件:
import { useState } from 'React';
export default function HelloWorld() {
const [msg, setMsg] = useState('Hello, World!');
const [logoUrl, setLogoUrl] = useState('./assets/logo.png');
return (
<>
<p>{ msg }</p>
<div><img src={ logoUrl } /></div>
</>
)
}
使用插值在相应的组件模板中显示 msg
变量的值:
<p>{ msg }</p>
使用插值在相应的组件模板中显示 img
属性的值:
<div><img src={ logoUrl }" /></div>
JavaScript 表达式
在 React 的模板中,我们可以使用 JavaScript 表达式:
{ number + 1 }
{ ok ? 'YES' : 'NO' }
{ message.split('').reverse().join('') }
Vue 插值
在 Vue 中,插值使用的是“Mustache”语法 (即双大括号)。
文本插值
为了说明插值的工作原理,下面的代码演示了一个包含变量的 HelloWorld 组件:
<script setup>
import { ref } from 'vue';
const msg = ref("Hello, World!");
const logoUrl = ref("./assets/logo.png");
</script>
<template>
<p>{{ msg }}</p>
<div><img src="{{ logoUrl }}"</div>
</template>
使用插值在相应的组件模板中显示 msg
变量的值:
<p>{{ msg }}</p>
请注意,这段对 img
属性插值的代码编译时会报错:
<div><img src="{{ logoUrl }}" /></div>
在 Vue 中不允许对属性直接插值,需要使用绑定的方式来为属性赋值,更详细的说明我们会在接下来的绑定一章来做详细介绍。
通过属性绑定来显示 img
属性的值:
<div><img :src="logoUrl" /></div>
JavaScript 表达式
Vue 在所有的数据绑定中都支持完整的 JavaScript 表达式:
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
小结
本章介绍了三大框架模板中的插值,对文本插值与 JavaScript 表达式做了说明。
Angular 和 Vue 都是使用的“Mustache”语法 (即双大括号),React 使用的是大括号{ }
来实现插值。其中 Angular 与 React 都可以对标签属性进行直接插值,Vue 要使用绑定指令来对属性进行插值。
文章参考链接: