Create a Rainbow in Vue

Create a Rainbow in Vue

I will try to explain a easy way to do a rainbow with Vue. With this method you do not need any external modeler, just Vue's basic shapes.

I will try to explain a easy way to do a rainbow with Vue. With this method you do not need any external modeler, just Vue's basic shapes.

One generally see rainbow with a rainy weather and a low-angled light. A convenient atmosphere is "Breaking Storm".

In this post is will cover:

  • A brief overview of v-for
  • Using v-for to display items from an array
  • Adding alternating colors to the items
  • Adding multiple colors to the items

Note: I'll be using <template> syntax for all code snippets here

Demo

Example of the final components that will be covered:

V-for Intro

Within Vue, often you will find yourself wanting to display a list of items. Vue has an elegant solution which allows you to repeat an HTML block utilizing the v-for directive (Vue's v-for Full Documentation).

This is what a general template for v-for would look like for an array of item objects:

<ul>
    <li v-for="(item, index) in itemList" v-bind:key="index">
        {{index}} - {{item}}
    </li>
</ul>

Which will look like this:

Three points to note about this code snippet:

  1. index doesn't need to be imported, but doing so will enable you to easily reference where in the array the current item is .
  2. Often v-bind: will be shortened to simply :. In this case v-bind:key="index" can be written as :key="index"
  3. The key is used as an identifier for Vue so that if an item in your list needs to be re-rendered, it can update only the specific item(s) that need it instead of the entire list every time!

For a more detailed introduction to v-for, I highly recommend checking here:

Building the Components

Now that we have a list of items displayed (see above example) we'll add static CSS (which we will build upon in future components).

Static Color Component

Before we get into the fancy work, we are going to start with the basics. Due to what we will be doing in the next two components, we're going to add the following to our <li> element:

<li 
    v-for="(item, index) in itemList" 
    v-bind:key="index"
+   v-bind:style="{
+       backgroundColor: 'firebrick',
+       color: 'white'
+   }"
>

// I also added the following to the to make it feel less dense // <style> +li {

  • padding: 5px;
  • } </style>

Let's review our changes line by line:

v-bind:style="{ - This creates a vue binding for style, which allows us to reference our data and/or item values for setting our style. In this case, we will be using Object Syntax.

backgroundColor: 'firebrick', - Vue uses camelCase for CSS properties instead of kebab-case. For now, we are statically setting our property value to 'firebrick'

color: 'white' - Similar to background color, we are statically assigning our font color to 'white'.

}" - Close our object!

At this point, our component will look like this:

Alternating Colors Component

Now, let's spice it up and alternate colors! For the first example, we're going to alternate between rebeccapurple (#663399) and firebrick (#B22222) using an array with our colors. For demonstration purposes, I'll be mixing a hexcode with a CSS color name.

<template> updates:

<li 
   v-for="(item, index) in itemList" 
   v-bind:key="index"
   v-bind:style="{
  • backgroundColor: 'firebrick',
  • backgroundColor: colors[index % 2], color: 'white' }" >
  • <script> updates:

    data() {
    return {
    
  • itemList: ["Item A", "Item B", "Item C", "Item D", "Item E"]
  • itemList: ["Item A", "Item B", "Item C", "Item D", "Item E"],
  • colors: ["rebeccapurple", "#B22222"] }; }
  • Line by line review:

    colors: ["rebeccapurple", "#B22222"] - Create an array of colors we would like to cycle through for our background color. Note that unlike in CSS, these need to be wrapped in " to set the values as a string.

    backgroundColor: colors[index % 2]

    • index % 2 - If you've never seen the Modulo (or Remainder) operator before, this might look strange to you. What happens here is the number after the % is removed from the number before it until it cannot be subtracted out and result in a non-negative number.

    i.e) 7 % 3 => 7 - 3 = 4 => 4 - 3 = 1 => 3 cannot be removed from 1, so 7 % 3 will return 1

    • backgroundColor: colors[index % 2] - The background color will be set based on what value is returned from our colors array. In this case, colors[0] will return rebeccapurple and colors[1] will return #B22222.

    Current State:

    Rainbow Component

    Now that we have our alternating colors setup, we can make 2 minor tweaks to our code to alternate through as many colors as we want!

    <template>

    <li 
    v-for="(item, index) in itemList" 
    v-bind:key="index"
    v-bind:style="{
    
  • backgroundColor: colors[index % 2],
  • backgroundColor: colors[index % colors.length], color: 'white' }" >
  • <script> updates:

    data() {
    return {
    
  • itemList: ["Item A", "Item B", "Item C", "Item D", "Item E"],
  • itemList: ["Item A", "Item B", "Item C", "Item D", "Item E","Item A", "Item B", "Item C", "Item D", "Item E"],
  • colors: ["rebeccapurple", "#B22222"]
  • colors: ["rebeccapurple", "#B22222", "black", "navy", "green"] }; }
  • Line by line review:

    colors[index % colors.length] - Here, we replaced 2 with colors.lengthwhich will use the length of our colors array to determine how many colors we would like to cycle through.

    itemList: ["Item A", "Item B", "Item C", "Item D", "Item E","Item A", "Item B", "Item C", "Item D", "Item E"] - Here, I'm doubling the list of items for demonstration purposes

    colors: ["rebeccapurple", "#B22222", "black", "navy", "green"] - This adds blacknavy, and green to our list of colors to cycle through.

    Final State: 

    Conclusion:

    In this example, I have used a diffrence of two cylinders, and it seems to work correctly. For the adventurous who like to experiment, you should know that you can do a more fuzzy rainbow with the use of the Fuzzy transparency function on a torus.

    Thanks for reading. If you liked this post, share it with all of your programming buddies!

    This post was originally published here

    vue-js web-development node-js

    Bootstrap 5 Complete Course with Examples

    Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

    Nest.JS Tutorial for Beginners

    Hello Vue 3: A First Look at Vue 3 and the Composition API

    Building a simple Applications with Vue 3

    Deno Crash Course: Explore Deno and Create a full REST API with Deno

    How to Build a Real-time Chat App with Deno and WebSockets

    Convert HTML to Markdown Online

    HTML entity encoder decoder Online

    Hire Node.JS Developers | Skenix Infotech

    We are providing robust Node.JS Development Services with expert Node.js Developers. Get affordable Node.JS Web Development services from Skenix Infotech.

    How to Hire Node.js Developers And How Much Does It Cost?

    A Guide to Hire Node.js Developers who can help you create fast and efficient web applications. Also, know how much does it cost to hire Node.js Developers.

    Top Node.js Development Companies and Expert NodeJS Developers

    A thoroughly researched list of top NodeJS development companies with ratings & reviews to help hire the best Node.JS developers who provide development services and solutions across the world. List of Leading Node.js development Service Providers...

    Top Vue.js Developers in USA

    Vue.js is an extensively popular JavaScript framework with which you can create powerful as well as interactive interfaces. Vue.js is the best framework when it comes to building a single web and mobile apps.

    Hire Web Developer

    Looking for an attractive & user-friendly web developer? HourlyDeveloper.io, a leading web, and mobile app development company, offers web developers for hire through flexible engagement models. You can **[Hire Web...