Important Button Important Button Important Button Important Button

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

JavaScript

番长神乐小小

2020-03-10

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

有任何想法吗？

第421篇《VueJS有条件地为元素添加属性》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
GreenMandy 2020.03.10

<input :required="condition">

您不需要，<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

那么，进行此绑定的最简单方法是 <input :required="condition">

只有当测试（或条件）可以被错误地解释时，您才需要做其他事情；在那种情况下，Syed的使用就!!可以解决问题。
  <input :required="!!condition">

十三古一 2020.03.10

最简单的形式：

<input :required="test">   // if true
<input :required="!test">  // if false
<input :required="!!test"> // test ? true : false
老丝乐 2020.03.10

在html中使用

<input :required="condition" />

并在数据属性中定义

data () {
   return {
      condition: false
   }
}
猴子十三 2020.03.10

尝试：

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android