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

Question

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

有什么想法吗？

Answer 1

尝试：

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

更新：Vue 3 中已更改，请参阅此答案https://stackoverflow.com/a/64598898

Answer 2

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

null

或

undefined

。

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>

Answer 3

最简单的形式：

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

Answer 4

<input :required="condition">

您不需要

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

，因为如果test是truthy，您已经获得了

required

属性，而如果test是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">

仅当测试（或条件）可能被误解时，您才需要做其他事情；在这种情况下，Syed 使用

!!

就可以了。

<input :required="!!condition">

Answer 5

您可以通过强制传递

boolean

，将

!!

放在变量之前。

let isRequired = '' || null || undefined
<input :required="!!isRequired"> // it will coerce value to respective boolean 

但是我想提请您注意以下情况，其中接收组件为 props 定义了

type

。在这种情况下，如果

isRequired

已将类型定义为

string

，则传递

boolean

会使类型检查失败，您将收到 Vue 警告。要解决这个问题，您可能想避免传递该道具，因此只需放置

undefined

后备，道具就不会发送到

component

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

解释

我也遇到过同样的问题，并尝试了上述解决方案！ 是的，我没有看到

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

是

String

，但它是

boolean

。

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

这意味着子组件确实收到了 prop，即使它是

false

。这里的调整是让子组件接受

default-value

并且也跳过检查。通过

undefined

不过可以！

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

这有效，我的子属性具有默认值。

Answer 6

您可以在属性前添加冒号（也可以使用条件），例如

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

如果你想设置像 props 这样的动态值，那么你也可以在属性名称之前使用冒号，例如：

<Child :data="userList" />

Answer 7

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

<input v-bind="attrs" />

其中 attrs 被声明为对象：

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

这将导致：

<input required type="text"/>

非常适合具有多个属性的情况。

Answer 8

在html中使用

<input :required="condition" />

并在数据属性中定义

data () {
   return {
      condition: false
   }
}

Answer 9

你可以这样写：

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

Answer 10

您也可以使用计算

<input :required="isRequired" />

计算：

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

Answer 11

使用

v-bind

v-bind="{ ...(type && { variant: type })

Answer 12

在 vuejs 中，你有一个叫做 v-show 的东西，它有条件地在 DOM 中渲染元素，而 v-if 只是不会显示在屏幕上，但仍然存在于 DOM 上。

你可以试试这个代码

使用模板，不要在按钮属性中使用 v-show 条件

<template v-show="isRequired">
    <button >Important Button</button>
</template>

这个“isRequired”似乎是一个计算属性，因此请确保在其中指定正确的逻辑

Answer 13

我有一张表格需要填写银行详细信息；如果用户选择它有一个帐户。

我的解决方案（使用 Vue 3 组合）很简单

创建一个 ref 变量，初始设置为 false；用于判断是否具有必需的属性

const isRequired = ref(false)

我添加了帐户更改事件；

<select id="account" v-model="form.account" 
@change="isRequired=!isRequired">
        <option value="YES">YES</option>
        <option value="NO">NO</option>
      </select>

<input type="text" name="bank_details" v-model="form.bank_details" 
:required="isRequired" />

所以当用户选择他们有一个帐户时；银行详细信息输入将添加必需的属性。