Vue 3: A look at class and style binding, and computed properties

As the title suggests, this lesson focuses on style and class binding, as well as computed properties. By now you should have been introduced to all three of these methods in your homework at Vuemastery, but the concepts are challenging enough to merit reinforcement.

1. To begin, download this zip file, which basically contains a clean version of the first exercise in the previous lesson. When you open the html file, VueIII.html in your browser, all drink names and descriptions should appear.
2. Unzip and drag everything into your folder. Open both files in your editor’s split view.
3. To start our journey let’s start with something radical and use style binding to change the background color of our h2 tags. Warning: this is going to be ugly.
4. Add bgColor: “red” to your data section. Next, bind bgColor to your <h2> tags as shown below and refresh your browser. Hideous long, thick red line, right?

   const drinkdata = {
       data() {
       return {
           bgColor: "red",
           drink: 
       [{

   
   

   <h2 :style="{ backgroundColor: bgColor }">{{ eachDrink.drink_name }}</h2>

5. Change the value of bgColor to something more subtle such as bgColor: “#d9d6d6” (a nice light gray) and move your style binding to the div tag instead. Now, each name and drink description has a gray background.
6. You could add as many css values as you like simply by separating them with commas and creating the value in your data, but that could get pretty clunky. In your data, create a new variable named myDiv and populate it with values as shown below. Then add it to your html by modifying your :style= statement.
   

   const drinkdata = {
       data() {
       return {
          myDiv: {
           backgroundColor: "#d9d6d6",
           width: "400px",
           fontFamily: 'Arial',
       },
           drink: 
       [{

   
   

   <div id="drink">
       <div :style="[myDiv]" v-for="eachDrink in drink" :key="eachDrink.counter">
         <h2>{{ eachDrink.drink_name }}</h2>
         <p>{{ eachDrink.fact }}</p>
       </div>
     </div>

7. It is also possible to apply multiple values at once by creating and applying more than one object that contains multiple css properties. Delete myDiv from your vue and replace it with these two variables: divStructure and divText. Bind divStructure to your <div></div> tag and divText to your <h2></h2> element.
   

    divStructure: {
               backgroundColor: "#f5cac3",
               width: '400px'
           },
           divText: {
               fontFamily: 'Courier New',
               fontStyle: 'bold',
               color: 'black',
           },
           drink: 
           [ 
   

Let’s compute something

This compute lesson will be brief but we may revisit compute later on. For now, we are going to use compute to cause one of the drinks to randomly appear in a header at the top of our document.

1. Add a computed section below data as shown below, with a value of title.

   //drinks
   },
   
     //NEW SECTION
     computed: {
       title() {
         
       }
     }
   };

2. Within the brackets { } add return this.drink[0].drink_name. Now add <h1> tags to the top of your document underneath <div id=”drink” >, and add {{title} between the h1 tags. Save everything and test.  You should see the first drink in the list (Iced Matcha Latte).

   computed: {
     title() {
       return this.drink[0].drink_name;
     }
   }

3. That was nice but we are equal opportunity around here so modify title to match the statement below to randomly select a drink name.

   computed: {
     title() {
       let whichDrink = Math.floor(Math.random() * this.drink.length);
       return this.drink[whichDrink].drink_name;
     }
   }

4. Now a random drink will appear every time you refresh the page.