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

什么好主意吗?


当前回答

使用v-bind

v-bind = "{…(类型&&{变体:类型})

其他回答

你也可以使用computed

<input :required="isRequired" />

计算:

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

<输入:要求= "条件" >

你不需要<input:required="test ?因为如果test为真,你就已经得到了所需的属性,如果test为假,你就不会得到属性。真假部分是多余的,就像这样……

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="test">   // if true
<input :required="!test">  // if false
<input :required="!!test"> // test ? true : false

你可以这样写:

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