vuejs 动态指令绑定到数据/计算值

Question

我将 vuetifyjs 用于我的 html 和 css。其中一个组件根据自定义指令更改其样式/行为（错误 || 成功 || 警告 || 信息）

例如

<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。在示例中，单击设置错误或设置成功按钮以更改类型。