# v-bind to bind multiple attributes
To bind multiple attributes using `v-bind` in Vue.js, you can pass an object where the keys are the attribute names and the values are the corresponding data properties or expressions.
Example:
Consider a scenario where you want to dynamically bind the `id`, `class`, and `title` attributes to an HTML element.
Code
```
```
In this example:
- A `div` with the ID `app` serves as the root element for the Vue application. - A `button` element uses `v-bind="buttonAttributes"` to bind multiple attributes. - In the Vue instance's `data` option, an object named `buttonAttributes` is defined. - This `buttonAttributes` object contains key-value pairs where the keys (`id`, `class`, `title`, `data-custom`) represent the attribute names, and the values are the desired values for those attributes. - Vue automatically applies these attributes to the `button` element when the component is mounted.
This approach simplifies binding multiple attributes, especially when dealing with a large number of dynamic attributes or when the attributes are logically grouped together in your data