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

Question

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

有任何想法吗？

Answer 1

尝试:

<input :required="test ? true : false">

Answer 2

最简单的形式:

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

Answer 3

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>

Answer 4

您可以通过boolean强制传递它，放在!!变量之前。

let isRequired = '' || null || undefined
<input :required="!!isRequired"> // it will coerce value to respective boolean 

但我想引起您对以下情况的注意，其中接收组件已type为 props定义。在这种情况下，如果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/>我没有看到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"
/>
 

这有效并且我的子道具具有默认值。

Answer 5

<input :required="condition">

你不需要<input :required="test ? true : false">因为如果测试是真的你已经获得了required属性,如果测试是假的,你就不会得到属性.这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">

只有当测试(或条件)被误解时,你才需要做其他事情; 在那种情况下,赛义德的使用!!就是诀窍.
  <input :required="!!condition">

Answer 6

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

<input v-bind="attrs" />

其中 attrs 被声明为一个对象：

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

这将导致：

<input required type="text"/>

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

Answer 7

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

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

如果要设置像 props 这样的动态值，则还可以在属性名称前使用冒号，例如：

<Child :data="userList" />