VueJS 有条件地为元素添加属性

尝试：

<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 是 truthy 您将已经获得 required 属性，如果 test 是 < em>falsy 你不会得到这个属性。 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 

但是我想提请您注意以下情况，其中接收组件已为 props 定义了 type。在这种情况下，如果 isRequired 已将类型定义为 string，则通过 boolean 使其类型检查失败，您将收到 Vue 警告。要解决此问题，您可能希望避免传递该道具，因此只需将 undefined 回退，该道具将不会发送到 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/> 我在 DOM 中看不到 prop 但在我的 <any-component/> 组件中，会弹出一个错误道具类型检查失败。与子组件一样，我希望 my-prop 是 String，但它是 boolean。

myProp : {
 type: String,
 required: false,
 default: ''
}

这意味着子组件确实收到了该道具，即使它是 false。这里的调整是让子组件接受 default-value 并跳过检查。通过 undefined 可以工作！

<any-component
  :my-prop="isValue ? 'Hey I am when the value exist' : undefined"
/>
 

这有效，我的孩子道具具有默认值。

---

值得注意的是，如果您想有条件地添加属性，您还可以添加动态声明：

<input v-bind="attrs" />

其中 attrs 被声明为对象：

data() {
    return {
        attrs: {
            required: true,
            type: "text"
        }
    }
}

这将导致：

<input required type="text"/>

非常适合具有多个属性的情况。

---

您可以在属性前添加冒号（也可以使用条件），例如

<div :class="current? 'active': '' " > 
<button :disabled="InvalidForm? true : false " >

如果你想设置像 props 这样的动态值，那么你也可以在属性名称之前使用冒号，例如：

<Child :data="userList" />

---

在 html 中使用

<input :required="condition" />

并在数据属性中定义，如

data () {
   return {
      condition: false
   }
}

---

您也可以使用计算

<input :required="isRequired" />

计算：

computed: {
   isRequired () {
      return someLogic //Boolean, true or false
   }

---

你可以这样写：

<input type="text" name="username" :required="condition ? true : false">

---