javascript - Vue 仅在条件下添加指令

Question

我只想在满足条件时添加指令。像这样的东西，但没有重复的代码

<v-text-field
    v-if="edit"
    v-model="name"
    append-icon="mdi-pencil"
    label="Name"
/>
<v-text-field
    v-else
    v-model="name"
    readonly
    label="Name"
/>

我花了很长时间才弄清楚这一点，这就是我在这里发布它的原因。

标签： javascriptvue.jsvuetify.js

Answer 1

只需直接绑定任何布尔指令并为其他所有内容使用条件。

<v-text-field
    v-model="name"
    :readonly="!edit"
    :append-icon="edit ? 'mdi-pencil' : ''"
    label="Name"
/>