文本 ​

text 组件用于渲染最终的文本

这是一个最基本的组件。

所用用到文字的地方都可以使用文本组件。

比如标题、表格列内容、列表、按钮名称、表单label、提示文字等等等等，只要有文字的地方就会有文本组件。

它的值可以由两种形式来指定：内容形式和数据绑定形式。

内容 ​

指定文本为具体内容，渲染完成之后作为最终纯文本展示，不会改变。

可以通过字符串和函数的方法指定：

字符串 ​

1. 纯字符串

需要静态展示的文本都可以使用纯字符串，选中使用字符串选项，填入相应文字即可：

2. 从作用域取

如果文本的内容是从作用域中获取的，比如在表格或者列表中。

那么可以使用有#前缀的属性名来获取。

现在有一个单选按钮组，通过一个数组来控制渲染：

[{
  label: '唱歌',
  value: 'sing',
},{
  label: '跳舞',
  value: 'dance',
},{
  label: '跑步',
  value: 'run',
}]

[{
  label: '唱歌',
  value: 'sing',
},{
  label: '跳舞',
  value: 'dance',
},{
  label: '跑步',
  value: 'run',
}]

每个选项的文本都通过文本组件来渲染，并取数组项中label的值：

这样，文本组件就能够从作用域中拿到label的值，完成渲染：

函数 ​

函数中可以编写任意的逻辑，通过返回值来指定文本内容：

() => {
  return new Date().toLocaleString().replaceAll('/', '-')
}

() => {
  return new Date().toLocaleString().replaceAll('/', '-')
}

将会展示当前的时间：

函数中可以使用this获取到页面中所有的变量，也可以获取到当前的作用域。

数据绑定 ​

如果文本的内容是从其他的地方获取的，现在这个值被放在了collectionData对象中，假设有个title字段：

那么就可以使用数据绑定，直接将它绑定到title上面：

注意要将内容形式中的"无"选中，也就是不使用内容形式，而使用数据绑定。

这样文本的内容就会跟collectionData对象中的title字段绑定起来。

当修改title的值时：

collectionData.title = '修改后的标题'

collectionData.title = '修改后的标题'

页面中文本的内容也会随之改变：

我们也可以在使用数据绑定的时候，给它设置一个默认值，这样当绑定的值还不存在时，就会展示出默认值的内容。