>[success] # attribute 强制行为 ~~~ 1.在使用vue 时候经常使用'v-bind' 对标签属性进行动态绑定，vue2.x 时候将这些属性按照分类分为三种 '布尔属性'/'枚举属性'/'其他属性'，在vue3.x 开始属性种类只分为'布尔属性'/'其他属性' 2.枚举属性有'contenteditable,draggable,spellcheck' 布尔属性有'allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,' + 'default,defaultchecked,defaultmuted,defaultselected,defer,disabled,' + 'enabled,formnovalidate,hidden,indeterminate,inert,ismap,itemscope,loop,multiple,' + 'muted,nohref,noresize,noshade,novalidate,nowrap,open,pauseonexit,readonly,' + 'required,reversed,scoped,seamless,selected,sortable,translate,' + 'truespeed,typemustmatch,visible' ~~~ >[info] ## 2.x 三种属性规则 ~~~ 1.普通类型：'如果是（undefined，null，或 false）移除该属性，其他则赋值是啥就是啥' 2.枚举类型：'contenteditable,draggable,spellcheck' 这三类枚举类型赋值为'undefined'则移除属性，其他无论你赋值成什么值， 都会将值转换成对应的布尔字符串，'contenteditable' 比较特殊因为他的枚举类型不仅仅只包含 'true 和false'含'events,caret,typing,plaintext-only'，如果是这三个，值则不进行布尔字符串转换 3.布尔类型：'如果是（undefined，null，或 false）移除该属性,但如果其他属性那则为对应本身' ~~~ * 官方给到图 ~~~ 1.第一列是当使用绑定值时候，第二列是普通属性渲染情况，第三列是枚举类型渲染情况 ~~~ | 绑定表达式 | `foo`正常 | `draggable`枚举 | | --- | --- | --- | | `:attr="null"` | \- | `draggable="false"` | | `:attr="undefined"` | \- | \- | | `:attr="true"` | `foo="true"` | `draggable="true"` | | `:attr="false"` | \- | `draggable="false"` | | `:attr="0"` | `foo="0"` | `draggable="true"` | | `attr=""` | `foo=""` | `draggable="true"` | | `attr="foo"` | `foo="foo"` | `draggable="true"` | | `attr` | `foo=""` | `draggable="true"` | >[info] ## Vue3.x 两种属性规则 ~~~ 1.其他属性：现在的'枚举属性'已经和'其他属性' 归为一类，因为之前'contenteditable' 枚举属性在发展阶段时候赋予了 除了'false/true' 其他值的概念，不如索性就将其归类为其他属性，当'undefined，null' 该属性会被移除，其他赋值会一比一显示 2.布尔属性：'如果是（undefined，null，或 false，0，-0）移除该属性,但如果其他属性那则为对应本身' ~~~ * 官方解释 ~~~ 1.现在可以发现 枚举和其他属性 他们的表现形式已经统一 ~~~ | 绑定表达式 | `foo`正常 | `draggable`枚举 | | --- | --- | --- | | `:attr="null"` | \- | \-\* | | `:attr="undefined"` | \- | \- | | `:attr="true"` | `foo="true"` | `draggable="true"` | | `:attr="false"` | `foo="false"`\* | `draggable="false"` | | `:attr="0"` | `foo="0"` | `draggable="0"`\* | | `attr=""` | `foo=""` | `draggable=""`\* | | `attr="foo"` | `foo="foo"` | `draggable="foo"`\* | | `attr` | `foo=""` | `draggable=""`\* | >[danger] ##### vue3.x 百分百移除属性 ~~~ 在 3.x 中，应该使用 null 或 undefined 以显式移除 attribute。 ~~~ >[info] ## 官方文章解释 [attribute 强制行为](https://v3.cn.vuejs.org/guide/migration/attribute-coercion.html#_3-x-%E8%AF%AD%E6%B3%95)