# 通用属性
通用属性,即所有组件都支持的属性。
开发者可以在所有的组件标签上都使用通用属性
。
# 示例代码
<template>
<div>
<text id="text1" class="text-normal">line 1</text>
<text id="text2" class="text-normal red">line 2</text>
</div>
</template>
# 常规属性
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
id | <string> | - | 唯一标识 |
style | <string> | - | 样式声明 |
class | <string> | - | 引用样式表 |
# 渲染属性
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
for | <array> | - | 根据数据列表,循环展开当前标签 |
if | <boolean> | - | 根据数据 boolean 值,添加或移除当前标签 |
show | <boolean> | - | 根据数据 boolean 值,显示或隐藏当前标签,相当于控制{ display: flex | none } |
渲染属性工作方式详见template 模板。
注意
属性和样式不能混用,不能在属性字段中进行样式设置。
# data 属性
给组件绑定 data 属性,然后运行时通过 dataset
获取,方便进一步判断。
示例:
<template>
<div>
<div id="elNode1" data-person-name="Jack"></div>
</div>
</template>
<script>
export default {
onReady () {
const el = this.$element('elNode1')
const elData = el.dataset.personName
console.info(`输出data属性: ${elData}`)
}
}
</script>