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"
/>

我花了很长时间才弄明白，这就是我将其张贴在这里的原因。

Answer 1

只需直接绑定任何布尔指令，对其他一切使用条件。

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

Answer 2

执行此操作的其他方法是使用计算属性，这种方法可以帮助您保持更易读和可扩展的代码。

举个例子：

<template>
      <v-text-field
          v-model="name"
          :readonly="!edit"
          :append-icon="isEditing"
          label="Name"
        />
</template>

<script>

// Default Vue script code....

computed: {
  isEditing() {
    return this.edit ? 'mdi-pencil' : '';
  }
}
</script>

您可以在模板中做的另一件事是开始对组件使用 CamelCase 而不是 kebab-case，这可以提高代码的可读性。

 <VTextField
        v-model="name"
        :readonly="!edit"
        :append-icon="isEditing"
        label="Name"
  />

仅代表个人拙见

Vue 仅在条件下添加指令

Vue add directive only on condition

javascript

vue.js

vuetify.js