有没有办法添加或删除整个属性？

Question

在 VueJS 1.x 中，我正在寻找一种编写此标签的方法：

<input type="checkbox">

或这个标签：

<input type="checkbox" disabled="disabled">

由 -model 中的值决定$data。

我的问题是，我尝试做的每一件事都像v-bind:disabled否则至少会写下这个词disabled，这太多了。有没有办法将完整属性写为名称值对或将其整体跳过？

我知道v-if和 组件，但这似乎是开销。如果有人知道这一点，非常感谢您的提示。

Answer 1

如果您查看 VueJS 的 TodoMVC 示例，就会发现该复选框是使用数据值完成/选中的。

详细说明：

HTML 可以是这样的：

<input class="toggle" type="checkbox" v-model="completed">

完成的地方可以是 $data 中的 true 或 false 值。

JS：

new Vue({
el: '#app',
data: {
completed: false
}
})

现在，根据数据值，复选框将被选中或取消选中。

如果您想在模型的基础上禁用，请尝试执行以下操作：

<input class="toggle" type="checkbox" v-model="completed" :disabled="someValue ? true : null">

任何虚假值都会删除该属性。

Answer 2

虽然给定的答案告诉您如何设置禁用的属性，但它并没有回答如何添加或删除属性的问题。

您可以使用 v-bind 属性添加和删除属性。

组件（保存为ExampleComponent.vue）：

<template>
    <any-tag v-bind="bindDisabled" />
</template>
<script>
export default {
    name: 'ExampleComponent',
    props: {
        disabled: { type: Boolean, default: false },
    },
    data (){
        return {
            bindDisabled : this.disabled !== false ? { disabled: 'disabled' } : {}
        }
    }
}
</script>

使用：

<example-component :disabled="true" />
<example-component :disabled="false" />

DOM：

<any-tag disabled="disabled"></any-tag>
<any-tag></any-tag>