Skip to content

vue/prefer-true-attribute-shorthand

v-bind 值为 true 时,要求简写形式属性

  • 💡 此规则报告的某些问题可由编辑器 suggestions 手动修复。

📖 规则详情

具有 true 值的 v-bind 属性通常可以简写。这可以减少冗长。

¥v-bind attribute with true value usually can be written in shorthand form. This can reduce verbosity.

Now loading...

警告

简写形式并不总是等效的!如果 prop 接受多种类型,但 Boolean 不是第一个,则简写 prop 不会通过 true

¥The shorthand form is not always equivalent! If a prop accepts multiple types, but Boolean is not the first one, a shorthand prop won't pass true.

vue
<script>
export default {
  name: 'MyComponent',
  props: {
    bool: Boolean,
    boolOrString: [Boolean, String],
    stringOrBool: [String, Boolean],
  }
}
</script>

简写形式:

¥Shorthand form:

vue
<MyComponent bool bool-or-string string-or-bool />
txt
bool: true (boolean)
boolOrString: true (boolean)
stringOrBool: "" (string)

手写形式:

¥Longhand form:

vue
<MyComponent :bool="true" :bool-or-string="true" :string-or-bool="true" />
txt
bool: true (boolean)
boolOrString: true (boolean)
stringOrBool: true (boolean)

这两个调用将引入不同的渲染结果。参见 此演示

¥Those two calls will introduce different render result. See this demo.

🔧选项

¥🔧 Options

默认选项为 "always"

¥Default options is "always".

json
{
  "vue/prefer-true-attribute-shorthand": ["error",
    "always" | "never",
    {
      except: []
    }
  ]
}
  • "always"(默认)...需要简写格式。

    ¥"always" (default) ... requires shorthand form.

  • "never" ...需要长格式。

    ¥"never" ... requires long form.

  • except (string[]) ...指定应区别对待的属性名称列表。

    ¥except (string[]) ... specifies a list of attribute names that should be treated differently.

"never"

Now loading...

"never", { 'except': ['value', '/^foo-/'] }

Now loading...

👫相关规则

¥👫 Related Rules

🚀版本

¥🚀 Version

此规则在 eslint-plugin-vue v8.5.0 中引入

¥This rule was introduced in eslint-plugin-vue v8.5.0

🔍代码实现

¥🔍 Implementation

eslint-plugin-vue v10.1 中文网 - 粤ICP备13048890号