Question

使用VueJS 1.x，我正在寻找一种方法来编写此标记：

<input type="checkbox">

或此标记：

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

由$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>

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

2 个答案: