在 VueJS 中，我们可以使用 v-if 添加或删除 DOM 元素：
<button v-if="isRequired">Important Button</button>
但是有没有办法添加/删除 dom 元素的属性，例如，对于以下有条件地设置所需的属性：
Username: <input type="text" name="username" required>
通过类似于：
Username: <input type="text" name="username" v-if="name.required" required>
有任何想法吗？
尝试：
<input :required="test ? true : false">
更新：它在 Vue 3 中发生了变化，请参阅此答案https://stackoverflow.com/a/64598898
最简单的形式：
<input :required="test"> // if true
<input :required="!test"> // if false
<input :required="!!test"> // test ? true : false
Vue 3 中更改了属性的条件渲染。要省略属性，请使用null或undefined。
视图 2：
<div :attr="false">
Result: <div>
<div :attr="null">
Result: <div>
视图 3：
<div :attr="false">
Result: <div attr="false">
<div :attr="null">
Result: <div>
<input :required="condition">
您不需要，<input :required="test ? true : false">因为如果test为真，您将已经获得该required属性，如果test为假，您将无法获得该属性。这true : false部分是多余的，就像这样......
if (condition) {
return true;
} else {
return false;
}
// or this...
return condition ? true : false;
// can *always* be replaced by...
return (condition); // parentheses generally not needed
那么，进行这种绑定的最简单方法是 <input :required="condition">
只有当测试（或条件）可能被误解时，您才需要做其他事情；在这种情况下，Syed 的使用!!可以解决问题。
<input :required="!!condition">
您可以通过boolean强制传递它，放在!!变量之前。
let isRequired = '' || null || undefined
<input :required="!!isRequired"> // it will coerce value to respective boolean
但我想请您注意以下接收组件已type为 props定义的情况。在这种情况下，如果isRequired已经定义了类型，string则通过boolean使其类型检查失败，您将收到 Vue 警告。要解决此问题，您可能希望避免传递该props，因此只需放置undefined回退，props就不会发送到component
let isValue = false
<any-component
:my-prop="isValue ? 'Hey I am when the value exist' : undefined"
/>
解释
我遇到了同样的问题，并尝试了上述解决方案！是的，我没有看到，prop但这实际上并不能满足这里的要求。
我的问题 -
let isValid = false
<any-component
:my-prop="isValue ? 'Hey I am when the value exist': false"
/>
在上述情况下，我所期望的不是my-prop传递给子组件 -<any-conponent/>我没有看到propinDOM但在我的<any-component/>组件中，由于 prop 类型检查失败而弹出错误。就像在子组件中一样，我希望my-prop是 aString但它是boolean.
myProp : {
type: String,
required: false,
default: ''
}
这意味着子组件确实收到了 prop，即使它是false. 这里的调整是让子组件接受default-value并跳过检查。undefined虽然通过了作品！
<any-component
:my-prop="isValue ? 'Hey I am when the value exist' : undefined"
/>
这有效并且我的子props具有默认值。