Javascript VueJS 有条件地为元素添加属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42874314/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
VueJS conditionally add an attribute for an element
提问by Don Smythe
In VueJS we can add or remove a DOM element using v-if:
在 VueJS 中，我们可以使用 v-if 添加或删除 DOM 元素：
<button v-if="isRequired">Important Button</button>
but is there a way to add / remove attributes of a dom element eg for the following conditionally set the required attribute:
但是有没有办法添加/删除 dom 元素的属性，例如，对于以下有条件地设置所需的属性：
Username: <input type="text" name="username" required>
by something similar to:
通过类似于：
Username: <input type="text" name="username" v-if="name.required" required>
Any ideas?
有任何想法吗？
回答by cymruu
Try:
尝试：
<input :required="test ? true : false">
回答by Syed
Simplest form:
最简单的形式：
<input :required="test"> // if true
<input :required="!test"> // if false
<input :required="!!test"> // test ? true : false
回答by Stephen P
<input :required="condition">
<input :required="condition">
You don't need <input :required="test ? true : false">because if testis truthyyou'll already get the requiredattribute, and if testis falsyyou won't get the attribute. The true : falsepart is redundant, much like this...
您不需要，<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
The simplest way of doing this binding, then, is <input :required="condition">
那么，进行这种绑定的最简单方法是 <input :required="condition">
Only if the test(or condition) can be misinterpreted would you need to do something else; in that case Syed's use of !!does the trick.
<input :required="!!condition">
只有当测试（或条件）可能被误解时，您才需要做其他事情；在这种情况下，Syed 的使用!!可以解决问题。
<input :required="!!condition">
回答by Satyam Pathak
I have been through the same problem, and tried above solutions !!
Yes, I don't see the propbut that actually does not fulfils what required here.
我遇到了同样的问题，并尝试了上述解决方案！！是的，我没有看到prop但实际上并没有满足这里的要求。
My problem -
我的问题 -
let isValid = false
<any-component
:my-prop="isValue ? 'Hey I am when the value exist': false"
/>
In the above case, what I expected is not having my-propget passed to the child component - <any-conponent/>I don't see the propin DOMbut In my <any-component/>component, an error pops out of prop type check failure. As in the child component, I am expecting my-propto be a Stringbut it is boolean.
在上述情况下，我所期望的不是my-prop传递给子组件 -<any-conponent/>我没有看到propinDOM但在我的<any-component/>组件中，由于 prop 类型检查失败会弹出错误。就像在子组件中一样，我希望my-prop是 aString但它是boolean.
myProp : {
type: String,
required: false,
default: ''
}
Which means that child component did receive the prop even if it is false. Tweak here is to let the child component to take the default-valueand also skip the check. Passed undefinedworks though!
这意味着子组件确实收到了 prop，即使它是false. 这里的调整是让子组件接受default-value并跳过检查。undefined虽然通过了作品！
<any-component
:my-prop="isValue ? 'Hey I am when the value exist' : undefined"
/>
This works and my child prop is having the default value.
这有效并且我的子道具具有默认值。
回答by Nipun Jain
In html use
在 html 中使用
<input :required="condition" />
And define in data property like
并在数据属性中定义，如
data () {
return {
condition: false
}
}
