通用属性

常规属性

名称类型默认值描述
id<string>-唯一标识
style<string>-样式声明
class<string>-引用样式表
disabled<boolean>false表明当前组件是否可用

渲染属性

名称类型默认值描述
for<array>-根据数据列表,循环展开当前标签
if<boolean>-根据数据 boolean 值,添加或移除当前标签
show<boolean>-根据数据 boolean 值,显示或隐藏当前标签,相当于控制{ display: flex | none }

渲染属性工作方式详见template 模板

注意:属性和样式不能混用,不能在属性字段中进行样式设置

data属性 1050+

给组件绑定data属性,然后运行时通过 dataset 获取,方便进一步判断

示例:

  1. <template>
  2. <div>
  3. <div id="elNode1" data-person-name="Jack"></div>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. onReady () {
  9. const el = this.$element('elNode1')
  10. const elData = el.dataset.personName
  11. console.info(`输出data属性: ${elData}`)
  12. }
  13. }
  14. </script>