# 框架属性

框架内置了一些属性。这些属性对所有组件都有效。

## `id` 属性

组件的标识符。

```html
<view id="hello"> Hello world! </view>
```

## `slot` 属性

用来表达这个节点应该被放入 `multipleSlots` 模式 [自定义组件](/miniprogram/dev/framework/component-framework/index.md) 中的哪个插槽。

## `class` 样式类

样式类主要用于结合 WXSS 来指定组件的样式。

样式类有两种写法：属性写法和前缀写法。其中，前缀写法仅 glass-easel 组件框架支持。它们的基本用法如下：

```html
<!-- 属性写法 -->
<view class="hello"> Hello world! </view>
<!-- 等价于 -->
<!-- 前缀写法 -->
<view class:hello> Hello world! </view>
```

需要应用多个 `class` 时，可以这样写：

```html
<!-- 属性写法 -->
<view class="hello hello-big"> Hello world! </view>
<!-- 等价于 -->
<!-- 前缀写法 -->
<view class:hello class:hello-big> Hello world! </view>
```

属性写法像普通属性那样接受数据绑定。对于前缀写法，每个 `class:` 单独接受一个数据绑定表达式，只有表达式为真时，这个 `class:` 才会生效。例如：

```html
<!-- 属性写法 -->
<view class="hello {{ big ? 'hello-big' : '' }}"> Hello world! </view>
<!-- 等价于 -->
<!-- 前缀写法 -->
<view class:hello class:hello-big="{{ big }}"> Hello world! </view>
```

注意：每个节点都可以选择用两种写法之一；但如果在一个节点上使用了前缀写法，就不能在同一个节点的 `class` 属性中使用数据绑定。

前缀写法仅 glass-easel 组件框架支持。在 glass-easel 组件框架中，前缀写法往往会更直观，因而优先推荐。

## `style` 内联样式

内联样式可以用于指定组件的样式。

内联样式有两种写法：属性写法和前缀写法。其中，前缀写法仅 glass-easel 组件框架支持。它们的基本用法如下：

```html
<!-- 属性写法 -->
<view style="font-size: 1.2em; color: blue;"> Hello world! </view>
<!-- 等价于 -->
<!-- 前缀写法 -->
<view style:font-size="1.2em" style:color="blue"> Hello world! </view>
```

使用数据绑定时：

```html
<!-- 属性写法 -->
<view style="font-size: {{ size }}em; color: {{ colorName }};"> Hello world! </view>
<!-- 等价于 -->
<!-- 前缀写法 -->
<view style:font-size="{{ size }}em" style:color="{{ colorName }}"> Hello world! </view>
```

注意：每个节点都可以选择用两种写法之一；但如果在一个节点上使用了前缀写法，就不能在同一个节点的 `style` 属性中使用数据绑定。

前缀写法仅 glass-easel 组件框架支持。在 glass-easel 组件框架中，前缀写法往往会更直观，因而优先推荐。

在实践中，静态样式定义写在 WXSS 中更有利于代码可读性；只有需要动态改变的样式才应使用 `style` 指定。换句话说，如果 `style` 没有数据绑定，那就应该考虑写在 WXSS 中，以提升代码的可维护性。