# 框架属性

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

# id 属性

组件的标识符。

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

# slot 属性

用来表达这个节点应该被放入 multipleSlots 模式 自定义组件 中的哪个插槽。

# class 样式类

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

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

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

需要应用多个 class 时,可以这样写:

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

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

<!-- 属性写法 -->
<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 组件框架支持。它们的基本用法如下:

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

使用数据绑定时:

<!-- 属性写法 -->
<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 中,以提升代码的可维护性。