Dynamic Props Binding

Show dynamically binding props to values using `v-bind` with an object syntax in Vue.js 3.
    <!-- Dynamic props binding using v-bind with an object syntax -->
    <button v-bind="buttonProps">Click Me!</button>
This is the HTML part of the Vue component. It uses v-bind with an object to dynamically bind multiple attributes to a <button> element. The 'buttonProps' is an object that will contain the attributes as key-value pairs.
import { ref } from 'vue';

export default {
  setup() {
    // Define a reactive object that contains properties for the button
    const buttonProps = ref({
      type: 'submit',
      class: 'btn-primary',
      disabled: false

    // You can dynamically update buttonProps here
    // For example, disable the button
    // buttonProps.value.disabled = true;

    return {
This is the JavaScript part of the Vue component with the Composition API. It creates a reactive object 'buttonProps' containing the props we want to bind to the button element. This object can be dynamically updated, and changes will be automatically reflected in the template.
.btn-primary {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;

.btn-primary:disabled {
  background-color: #ccc;
  cursor: not-allowed;
This is the CSS styling for the button. It defines the primary button style and the style to be applied when the button is disabled.