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

时间:2017-03-18 12:17:56

标签: javascript vue.js vuejs2

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

有什么想法吗?

8 个答案:

答案 0 :(得分:77)

尝试:

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

答案 1 :(得分:44)

最简单的形式:

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

答案 2 :(得分:13)

<input :required="condition">

您不需要<input :required="test ? true : false">,因为如果测试 truthy ,您将获得required属性,如果测试 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">

只有当测试(或条件)被错误解释时,您才需要做其他事情;在这种情况下,赛义德使用!!就可以了  <input :required="!!condition">

答案 3 :(得分:4)

在Vue 3中更改了属性的条件渲染。要省略属性,请使用nullundefined

Vue 2:

<div :attr="false">
Result: <div>

<div :attr="null">
Result: <div>

Vue 3:

<div :attr="false">
Result: <div attr="false">

<div :attr="null">
Result: <div>

答案 4 :(得分:2)

在html中使用

<input :required="condition" />

并在数据属性中定义

data () {
   return {
      condition: false
   }
}

答案 5 :(得分:1)

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

<input v-bind="attrs" />

其中attrs被声明为对象:

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

这将导致:

<input required type="text"/>

在具有多个属性的情况下非常理想。

答案 6 :(得分:0)

我已经遇到了同样的问题,并尝试了上述解决方案! 是的,我看不到prop,但实际上并不能满足此处的要求。

我的问题-

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

在上述情况下,我期望没有将my-prop传递给子组件-<any-conponent/>prop中看不到DOM,但在我的<any-component/>组件中,错误从prop类型检查失败中弹出。与子组件一样,我期望my-propString,但它是boolean

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

这意味着子组件确实收到了道具,即使它是false。此处的调整是让子组件采用default-value并跳过检查。通过undefined的作品还是可以的!

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

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

答案 7 :(得分:0)

您可以在属性之前添加冒号(也可以使用条件),例如

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

如果要设置诸如props之类的动态值,则还可以在属性名称前使用冒号:

<Child :data="userList" />