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:

8. Counter using buttons with v-on click

We can listen to an event using v-on:event, or its shorthand @event. The particular event we listen for is click.

This is App.vue file:

<template>
  <div>
    <button v-on:click="inc">Calling inc method</button>
    <button v-on:click="count++">inc expression</button>
    <button @click="dec">Calling dec method</button>
    <button @click="count--">dec expression</button>
    <h2>Counter: {{count}}</h2>
  </div>
</template>

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

<style>
h2 {
  color: blue;
  background-color: orange;
  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:

7. Using v-for to Iterate over an object

We can iterate over an object. We get value and key pairs from any object in the data.

This is the App.vue file:

<template>
  <div>
    <h2 v-for="(v,k) in obj">{{hello}} - {{k}} = {{v}}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hello: "Hello Vue World",
      obj: {"A":5,"B":7,"C":9,"D":12,"E":15,"F":6}
    }
  }
}
</script>

<style>
h2 {
  color: blue;
  background-color: orange;
  width: 400px;
}
</style>

This is the output:

6. Using v-for to iterate over a list

Here v-for is used to iterate over a list of strings.

This is App.vue file:

<template>
  <div>
    <h2 v-for="v in arr">{{hello}} - {{v}}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hello: "Hello Vue World",
      arr: ["A","B","C","D","E","F"]
    }
  }
}
</script>

<style>
h2 {
  color: blue;
  background-color: orange;
  width: 300px;
}
</style>

This is the output:

5. Using v-for to iterate over a range

We can use v-for to iterate over a range if we iterate over a number. Here the variable i will go from 1 to 5.

This is App.vue:

<template>
  <div>
    <h2 v-for="i in 5">{{hello}} - {{i}}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hello: "Hello Vue World"
    }
  }
}
</script>

<style>
h2 {
  color: blue;
  background-color: orange;
  width: 300px;
}
</style>

This is the output:

4. Hello Vue Component

A component, which prints the property it recieves in hello prop is created.

This is Hello.vue in the folder components.

<template>
  <h2>{{hello}}</h2>
</template>

<script>
export default {
  props: ['hello'],
}
</script>

<style>
h2 {
  color: blue;
  background-color: orange;
  width: 250px;
}
</style>

This is App.vue which uses Hello component.

<template>
  <div>
    <app-hello hello="Hello Vue World"></app-hello>
    <app-hello hello="This is from a component"></app-hello>
  </div>
</template>

<script>
import Hello from './components/Hello.vue'
export default {
  components: {
    appHello: Hello
  }
}
</script>

This is the output:

3. Hello Vue World using v-html

We can include html using v-html.

This is the App.vue file:

<template>
  <h1 v-html="hello" id="app"></h1>
</template>

<script>
export default {
  data () {
    return {
      hello: 'Hello <span><em>Vue</em></span> World'
    }
  }
}
</script>

<style>
span {
  color: red;
  font-size: 24px;
}
</style>

This is the output:

2. Hello Vue World using v-text

The same output as in Example 1 can be created with v-text.

This is the file App.vue

<template>
  <h1 v-text="hello" id="app"></h1>
</template>

<script>
export default {
  data () {
    return {
      hello: 'Hello Vue World'
    }
  }
}
</script>

1. Hello Vue World

A string in data variable, hello, is printed.

This is the file App.vue (created with vue cli)

<template>
  <h1 id="app">{{hello}}</h1>
</template>

<script>
export default {
  data () {
    return {
      hello: 'Hello Vue World'
    }
  }
}
</script>

This is the output: