元素属性

优质

小牛编辑

139浏览

2023-12-01

在使用Vdt的过程中，你也许会遇到这样一个问题：设置的属性，并不能渲染出来，例如：

<input maxlength="10" />

上述例子中，设置的maxlength属性丢失了。要理解这个原因，可以看看这段介绍 Content attribute & IDL attribute，以及Virtual-Dom文档中对VNode的介绍

Content vs IDL attribute

Content attribute为小写风格lowercase，通过element.setAttribute() & element.getAttribute() 方法来设置&获取属性；

IDL attribute为驼峰风格lowerCamlCase，你可以像读取javascript对象一样来设置&获取属性，例如：element.foo

在Vdt中，使用的都是IDL attribute，而上述例子中，maxlength为Content attribute，所以并不会渲染到html中，但是你可以这样访问该属性: element.maxlength === '10';

maxlength 对应的IDL attribute为：maxLength，所以我们可以这样设置该属性

<input maxLength="10" />

关于IDL attribute可以查看Web API HTMLInputElement

不过你也不用担心这么多属性怎么去查，基本上只需要将属性名从lowercase改成lowerCamlCase即可

class & for

class和for这两个属性对应的IDL attribute分别为className和htmlFor，由于它们比较常见， Vdt在内部已经自动将它们转换了，所以这两种属性写法都是合法的。

attributes属性

HTML所有元素都具有attributes属性，通过它设置的所有属性都会当做Content attribute，参见：attributes

因此通过attributes属性我们可以设置任意的自定义属性，例如：

<input attributes={{maxlength: 10, hello: 'vdt', 'data-a': 'b'}} />

Boolean属性值

对于值为Boolean类型的属性，只接受Boolean类型的值，而且不能省略

"true"和"false"这样的字符串会被当做true处理
省略属性值，并不会将html中属性值设为true，而是会当做false处理
不能用attributes属性来设置Boolean值，因为所有attributes对象里的值，会转成String类型

例如下面这样设置是达不到目的的：

<div>
  <input readOnly="false" value="设为false也不能写"/>
  <input readOnly value="等于没设，可以读写"/>
  <input attributes={{readonly: false}} value="设为false也不能写"/>
</div>

正确的做法：

<div>
  <input readOnly={false} value="设为false，正常读写"/>
  <input readOnly={true} value="设为true，只读"/>
</div>