19. Animating Element in Vue

We use button to show and hide a h2 text element. The name of the transition is slide-fade.

It slides in and out. But when it slides out, it also scales to 0.

This is App.vue file:

<template>
  <div>
    <button @click="show = !show">Toggle render</button>
    <transition name="slide-fade">
      <h2 v-if="show">hello</h2>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

<style>
.slide-fade-enter {
  transform: translateX(150px);
  opacity: 0;
}
.slide-fade-enter-active {
  transition: all 2.5s;
}
.slide-fade-leave-active {
  transition: all 50s;
}
.slide-fade-leave-to {
  transform: translateX(350px);
  transform: scale(0);
  opacity: 0;
}
button {
  color: white;
  background-color: green;
  border-radius: 10px;
  padding: 5px;
  display: block;
  margin: 0 auto;
}
h2 {
  color: blue;
  background-color: orange;
  width: 400px;
}
</style>

This is output as the element leaves (at the beginning and at the middle)

Near the middle showing it scaling towards 0:

18. Binding classes

We can bind a class so it will be either bound or not depending on a boolean value.

Here the class is called sec. It will apply to either of the h2 elements based on the value bool which can be toggled by the button.

This is App.vue file:

<template>
  <div>
    <button @click="bool=!bool">Change Class</button>
    <h2 :class="{sec:bool}">Secret 1</h2>
    <h2 :class="{sec:!bool}">Secret 2</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bool: false
    }
  }
}
</script>

<style>
.sec {
  color: green;
  background-color: pink;
}
button {
  color: white;
  background-color: green;
  border-radius: 10px;
  padding: 5px;
  display: block;
  margin: 0 auto;
}
h2 {
  color: blue;
  background-color: orange;
  width: 400px;
}
</style>

This is the output:

17. Using v-if and v-else to show and hide

A boolean value, bool, can be changed by clicking on a button.

This will either hide or show different h2 elements.

This is the App.vue file:

<template>
  <div>
    <button @click="bool=!bool">Show/Hide</button>
    <h2 v-if="bool">Secret 1</h2>
    <h2 v-else>Secret 2</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bool: false
    }
  }
}
</script>

<style>
button {
  color: white;
  background-color: green;
  border-radius: 10px;
  padding: 5px;
  display: block;
  margin: 0 auto;
}
h2 {
  color: blue;
  background-color: orange;
  width: 400px;
}
</style>

This is the output:

16. Sorting a list

We have a list of objects. We can sort the list using the array sort function.

Depending on which button is clicked, we either sort ascending or descending.

This is the App.vue file:

<template>
  <div>
    <button @click="sort(1)">Ascending</button>
    <button @click="sort(-1)">Descending</button>
    <h2 v-for="v in arr">{{v.id}} - {{v.val}}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {id: "A", val: 5},
        {id: "B", val: 7},
        {id: "C", val: 9},
        {id: "D", val: 12},
        {id: "E", val: 15},
        {id: "F", val: 6}
      ]
    }
  },
  methods: {
    sort: function(p) {
      this.arr.sort(function(a,b) {
        return (a.val - b.val) * p;
      });
    }
  }
}
</script>

<style>
button {
  color: white;
  background-color: green;
  border-radius: 10px;
  padding: 5px;
  display: block;
  margin: 0 auto;
}
h2 {
  color: blue;
  background-color: orange;
  width: 400px;
}
</style>

This is the output after ascending button is clicked:

15. Using a v-for with a select dropdown list

This is similar to last example except now all the options values are in a data list which is bound to the value atrribute after iterating over options using a v-for.

This is the App.vue file:

<template>
  <div>
    <fieldset>
      <legend>Color used:</legend>
      <select v-model="col">
        <option v-for="c in cols" :value="c">{{c}}</option>
      </select>
    </fieldset>
    <h2>Color:</h2>
    <h2>{{col}}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      col: "Red",
      cols: ["Red","Green","Blue"]
    }
  }
}
</script>

<style>
h2 {
  color: blue;
  background-color: orange;
  width: 400px;
  margin: 20px auto;
  text-align: center;
}
</style>

The output is same as the previous Example.

14. Select to create a list of drop down values

Here the v-model directive is in the select tag and not with the individual options.

Here we used different options with value indicated.

This is the App.vue file:

<template>
  <div>
    <fieldset>
      <legend>Color used:</legend>
      <select v-model="col">
        <option value="Red">Red</option>
        <option value="Green">Green</option>
        <option value="Blue">Blue</option>
      </select>
    </fieldset>
    <h2>Color:</h2>
    <h2>{{col}}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      col: "Red"
    }
  }
}
</script>

<style>
h2 {
  color: blue;
  background-color: orange;
  width: 400px;
  margin: 20px auto;
  text-align: center;
}
</style>

This is the output:

13. Radio Buttons

A set of radiobuttons with same v-model will act as a group with the value added to the v-model string of whichever button is seleced.

Here the v-model string is col, which is then printed.

This is App.vue file:

<template>
  <div>
    <fieldset>
      <legend>Color used:</legend>
      <label>Red</label>
      <input type="radio" v-model="col" value="Red">
      <label>Green</label>
      <input type="radio" v-model="col" value="Green">
      <label>Blue</label>
      <input type="radio" v-model="col" value="Blue">
    </fieldset>
    <h2>Color:</h2>
    <h2>{{col}}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      col: "Red"
    }
  }
}
</script>

<style>
input {
  background-color: #EEE;
  color: #111;
  display: block;
}
h2 {
  color: blue;
  background-color: orange;
  width: 400px;
  margin: 20px auto;
  text-align: center;
}
</style>

This is the output:

12. Checkboxes

A set of checkboxes with same v-model will act as a group with the value added to the v-model list if seleced.

Here the v-model list in col, is used to create a string colors.

This is App.vue file:

<template>
  <div>
    <fieldset>
      <legend>Colors used</legend>
      <label>Red</label>
      <input type="checkbox" v-model="col" value="Red">
      <label>Green</label>
      <input type="checkbox" v-model="col" value="Green">
      <label>Blue</label>
      <input type="checkbox" v-model="col" value="Blue">
    </fieldset>
    <h2>Colors:</h2>
    <h2>{{colors}}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      col: []
    }
  },
  computed: {
    colors: function() {
      return this.col.join(", ");
    }
  }
}
</script>

<style>
input {
  background-color: #EEE;
  color: #111;
  display: block;
}
h2 {
  color: blue;
  background-color: orange;
  width: 400px;
  margin: 20px auto;
  text-align: center;
}
</style>

This is the output:

11. Computed property

A computed property depends on data properties, and when they change, it also changes.

Here if either data properties of first or last change, then fullName will also change.

This is App.vue file:

<template>
  <div>
    <fieldset>
      <label>Enter first:</label>
      <input type="text" v-model="first">
      <label>Enter last:</label>
      <input type="text" v-model="last">
    </fieldset>
    <h2>Full Name:</h2>
    <h2>{{fullName}}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      first: "",
      last:""
    }
  },
  computed: {
    fullName: function() {
      return this.first + " " + this.last;
    }
  }
}
</script>

<style>
input {
  background-color: #EEE;
  color: #111;
  display: block;
}
h2 {
  color: blue;
  background-color: orange;
  width: 400px;
  margin: 20px auto;
  text-align: center;
}
</style>

This is the output:

10. Using filter local to component

We can create a component filter by putting our filter in filters in the component script.

Here the filter checks if all characters are capital. Should the string be empty, we will get a return value of false, as we never enter the for loop.

Each time we get a capital character, the retV variable is set as true.

For a character not a capital letter, we immediately return a false.

Thus should we complete the entire for loop it means all characters are capital.

This is the App.vue file:

<template>
  <div>
    <label>Enter string:</label>
    <input type="text" v-model="val">
    <h2>Is string all capital?</h2>
    <h2>{{val|isAllCap}}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      val: ""
    }
  },
  filters: {
    isAllCap: function(v) {
      let retV = false;
      for (let i = 0; i < v.length; i++) {
        let c = v.charAt(i);
        if (c >= 'A' && c <= 'Z') retV = true;
        else return false;
      }
      return retV;
    }
  }
}
</script>

<style>
h2 {
  color: blue;
  background-color: orange;
  width: 400px;
  margin: 50px auto;
  text-align: center;
}
</style>

This is the output:

9. Chaging Counter background color using v-model and binding (v-bind) to style

An input box controls style of the Counter display background color. The input uses v-model for 2-way data binding, and the style attribute is bound using v-bind to that background color.

This is App.vue file.

<template>
  <div>
    <button @click="inc">Calling inc method</button>
    <button @click="dec">Calling dec method</button>
    <h2 v-bind:style="{backgroundColor:col}">Counter: {{count}}</h2>
    <input type="text" v-model="col">background counter color</input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      col: ""
    }
  },
  methods: {
    inc() { this.count++},
    dec() { this.count--}
  }
}
</script>

<style>
h2 {
  color: blue;
  width: 400px;
  margin: 50px auto;
  text-align: center;
}
button {
  color: white;
  background-color: green;
  border-radius: 10px;
  padding: 5px;
  display: block;
  margin: 0 auto;
}
</style>

This is the output: