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

在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">

最简单的形式：

<input :required="test">   // if true
<input :required="!test">  // if false
<input :required="!!test"> // test ? true : false

<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为道具定义。在这种情况下，如果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/>我看不到propin，DOM但是在我的<any-component/>组件中，错误从prop类型检查失败中弹出。与子组件一样，我期望my-prop是a，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"
/>
 

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

在html中使用

<input :required="condition" />

并在数据属性中定义

data () {
   return {
      condition: false
   }
}