Vuejs Binding

Fullhand attribute binding

<a v-bind:href="url">...</a>

Shorthand

<a :href="url">...</a>

Two way data binding

<input v-model="firstName">
Vuejs Binding2

True or false will add or remove attribute:

<button :disabled="isButtonDisabled”>...

If isActive is truthy, the class ‘active’ will appear:

<div :class="{ active: isActive }">...

Style color set to value of activeColor:

<div :style="{ color: activeColor }">
Vuejs Binding3

Toggles the display: none CSS property:

<p v-show="showProductDetails">
  ...
</p>

Passing arguments to a computed binding:

<template>
  <ProductComponent :cost="product_type('product_2')"></ProductComponent>
</template>

<script>
  import ProductComponent from @/components/ProductComponent
  
  export default {
    components: { ProductComponent },
    data() {
      return {
        products: {
          product_1: '100',
          product_2: '200',
          product_3: '300'
        }
      }
    },
    computed: {
      product_type() {
        // Argument passed to arrow function, NOT computed function declaration.
        return (product_id) => { // Arrow function to allow 'this' instance to be accessible.
          return this.products[product_id]  // Square bracket notation for 'any' type variable
        }
      }
    }
  }
</script>