Skip to content

useVueValidVIf

¥Summary

¥How to configure

biome.json
{
"linter": {
"rules": {
"nursery": {
"useVueValidVIf": "error"
}
}
}
}

¥Description

强制 Vue 模板使用有效的 v-if

¥Enforces valid v-if usage for Vue templates.

此规则会在以下情况下报告 v-if 指令:

¥This rule reports v-if directives in following cases:

  • 该指令包含一个参数。例如<div v-if:aaa="foo"></div>

    ¥The directive has an argument. E.g. <div v-if:aaa="foo"></div>

  • 该指令有一个修饰符。例如<div v-if.bbb="foo"></div>

    ¥The directive has a modifier. E.g. <div v-if.bbb="foo"></div>

  • 该指令没有属性值。例如<div v-if></div>

    ¥The directive does not have an attribute value. E.g. <div v-if></div>

  • 同一个元素也可能包含 v-elsev-else-if。例如<div v-if="foo" v-else></div>

    ¥The same element also has v-else or v-else-if. E.g. <div v-if="foo" v-else></div>

¥Examples

¥Invalid

<div v-if:aaa="foo"></div>
<div v-if.bbb="foo"></div>
<div v-if></div>
<div v-if="foo" v-else></div>
<div v-if="foo" v-else-if="bar"></div>

¥Valid

<div v-if="ok"></div>
<div v-if="a < b"></div>
<div v-if="a"></div>
<div v-else-if="b"></div>
<div v-else></div>

¥Related links