vuejs 动态指令绑定到 data/computed 值

Question

我为 html & css 使用 vuetifyjs。它的组件之一根据自定义指令更改它的 styling/behavior（错误 || 成功 || 警告 || 信息）

例如

<v-snackbar error></v-snackbar>
<v-snackbar success></v-snackbar>

有没有办法将指令绑定到数据或计算值？

像这样：

<v-snackbar {{ type }}></v-snackbar>

Answer 1

创建一个名为 type 的数据属性（或任何您想要的名称），它具有您要传递的属性（例如，success）。

data:{
  type: {success: true}
}

并将其绑定到 snackbar 组件。

<v-snackbar v-bind="type"></v-snackbar>

这是他们文档中的 modified example。在示例中，单击“设置错误”或“设置成功”按钮以更改类型。

vuejs dynamic directive bound to data/computed value