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 type="text" name="username" :required="condition ? true : false">

其他回答

你也可以使用computed

<input :required="isRequired" />

计算:

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

值得注意的是，如果你想有条件地添加属性，你也可以添加一个动态声明:

<input v-bind="attrs" />

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

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

这将导致:

<input required type="text"/>

适用于具有多个属性的情况。

Try:

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

更新:Vue 3已经改变了，请参阅这个答案https://stackoverflow.com/a/64598898

你可以在属性前添加冒号(也可以使用条件)

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

如果你想设置一个动态值，比如props，那么你也可以在属性名前使用冒号，比如:

<Child :data="userList" />

你可以这样写:

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

推荐文章